Как показать код, как веб-сайты разработчиков в HTML?
Я хотел бы узнать, как показать код таким же образом, как на Stackru или других веб-сайтах разработчиков. Когда я имею в виду шоу-код, я имею в виду это так.
Some sample Code
Я вижу это на многих сайтах разработчиков и хотел бы знать, как это сделать.
2 ответа
Совет: прочитайте несколько уроков и изучите HTML, CSS и JavaScript.
Однако вот полностью рабочий пример:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
</head>
<body>
<pre>
<code class="hljs java">
public class Main {
public static void main(String[] args) {
}
}
</code>
</pre>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
</body>
</html>
Вот как это работает. Вы пишете компьютерный код внутри <code> элементы. Вы заверните <code> элементы с <pre> элементы для сохранения пробелов, новые строки и т. д.
Затем вы должны выделить синтаксис (также известный как раскрашивание) кода. Для этого вам лучше использовать стороннюю библиотеку. Есть множество библиотек, которые могут сделать это:
- Highlight.js (тот, который я использовал здесь)
- призма
- SyntaxHighlighter
- и т.п.
Некоторые из этих библиотек позволяют также выбрать цветовую схему для вашего блока кода. Вот тот же код с другой цветовой схемой:
Единственная строка, измененная для применения новой цветовой схемы:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/darcula.min.css">
Используйте тег HTML code - <code>,
Вы можете редактировать, как это выглядит в CSS, может быть, что-то вроде этого...
code {
background-color:#F5F5F5;
}