Как подключить Highlight.js

Подключаем Highlight.js из CDN (23 languages and 1 styles)

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/highlight.min.js"></script>
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.1.0/styles/default.min.css">
<script>hljs.initHighlightingOnLoad();</script>

Подключение пользовательского пакета (150 languages and 71 styles)

<!--highlight.js--><link rel="stylesheet" href="/knowhow/highlight/path/to/styles/github.css">
       <script src="/knowhow/highlight/path/to/highlight.pack.js"></script>
       <script>hljs.initHighlightingOnLoad();</script><!--end../ highlight.js-->

Использование Hightlight.js

<pre><code><!--автоопределение-->
p{margin-top:.5em;margin-bottom:1em}
</code></pre>

&


<pre><code class="css"><!--задать самостоятельно в виде названия класса-->
p{margin-top:.5em;margin-bottom:1em}
</code></pre>

Как отобразить теги на веб-странице?

1. пропустить html код через Entity Generator: [1] [2] [3] [4]
2. самостоятельно задать html класс

<!--highlight.js--><pre><code class="html">

&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;meta charset=&quot;utf-8&quot;&gt;
  &lt;meta name=&quot;robots&quot; content=&quot;none&quot;/&gt;
  &lt;title&gt;Пример веб-страницы&lt;/title&gt;
  &lt;style&gt;p{margin-top:.5em;margin-bottom:1em}&lt;/style&gt;
       &lt;!--highlight.js--&gt;&lt;link rel=&quot;stylesheet&quot; href=&quot;/knowhow/highlight/path/to/styles/github.css&quot;&gt;
       &lt;script src=&quot;/knowhow/highlight/path/to/highlight.pack.js&quot;&gt;&lt;/script&gt;
       &lt;script&gt;hljs.initHighlightingOnLoad();&lt;/script&gt;&lt;!--end../ highlight.js--&gt;
 &lt;/head&gt;
 &lt;body&gt;
  &lt;h1&gt;Заголовок&lt;/h1&gt;
  &lt;!-- Комментарий --&gt;
  &lt;p&gt;Первый абзац.&lt;/p&gt;
  &lt;p&gt;Второй абзац.&lt;/small&gt;&lt;/p&gt;
  &lt;p&gt;Второй абзац.&lt;/p&gt;
 &lt;/body&gt;
&lt;/html&gt;

</code></pre>

На выходе получаем

<!DOCTYPE HTML>
<html>
 <head>
  <meta charset="utf-8">
  <meta name="robots" content="none"/>
  <title>Пример веб-страницы</title>
  <style>p{margin-top:.5em;margin-bottom:1em}</style>
       <!--highlight.js--><link rel="stylesheet" href="/knowhow/highlight/path/to/styles/github.css">
       <script src="/knowhow/highlight/path/to/highlight.pack.js"></script>
       <script>hljs.initHighlightingOnLoad();</script><!--end../ highlight.js-->
 </head>
 <body>
  <h1>Заголовок</h1>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</small></p>
  <p>Второй абзац.</p>
 </body>
</html>

Чтобы отключить выделение вообще, использовать nohighlight класс

 <pre><code class="nohighlight">...</code></pre>

Нумерация строк в highlight.js [1]

Подключение..

<!--highlight.js--><link rel="stylesheet" href="/knowhow/highlight/path/to/styles/github.css">
       <script src="/knowhow/highlight/path/to/highlight.min.js"></script>
	   <script src="/knowhow/highlight/src/highlightjs-line-numbers.min.js"></script>
       <script>hljs.initHighlightingOnLoad(); hljs.initLineNumbersOnLoad();</script><!--end../ highlight.js-->

Последнее, что нам осталось, — добавить стили

.hljs-line-numbers {
	text-align: right;
	border-right: 1px solid #ccc;
	color: #999;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none; 
}

Готово! Демонстрация работы плагина line-numbers

highlightjs-line-numbers.min.js & highlightjs-line-numbers.js