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

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

1
2
3
<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)

1
2
3
<!--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

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

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

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

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

1
2
3
4
5
<!--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>

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!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]

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

1
2
3
4
<!--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-->

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

1
2
3
4
5
6
7
8
9
10
11
.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;
}

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

Расширенные возможности плагина line-numbers

Links

1
2
3
hljs.initLineNumbersOnLoad({
    withLinks: true
});

и..

1
2
3
4
5
6
7
8
9
.hljs-line-numbers a {
    text-decoration: none;
    color: #999;
}
.hljs-line-numbers a:target {
    color: #ff0000;
    text-decoration: underline;
    outline: none;
}

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

Демонстрация работы расширенной версии

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

1
2
3
4
5
6
<!--highlight.js--><link rel="stylesheet" href="/knowhow/highlight/path/to/styles/googlecode.css">
       <script src="/knowhow/highlight/path/to/highlight.min.js"></script> 
	   <script src="/knowhow/highlight/src/line-link/highlightjs-line-numbers.min.js"></script> 
       <script>hljs.initHighlightingOnLoad(); hljs.initLineNumbersOnLoad({withLinks: true});</script><!--end../ highlight.js-->
<style>.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}
.hljs-line-numbers a{text-decoration:none;color:#999}.hljs-line-numbers a:target{color:red;text-decoration:underline;outline:none}</style>

Вернуться назад