Highlight.js

Highlight.js — это средство подсветки синтаксиса, написанное на JavaScript. Он работает как в браузере, так и на сервере. Он работает практически с любой разметкой, не зависит от какой-либо платформы и имеет автоматическое определение языка.

Начиная

Минимум для использования Highlight.js на веб-странице — это ссылка на библиотеку вместе с одним из стилей и вызов initHighlightingOnLoad:

1
2
3
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>

Это позволит найти и выделить код внутри <pre><code>тегов; он попытается автоматически определить язык. Если автоматическое определение не работает для вас, вы можете указать язык в classатрибуте:

1
<pre><code class="html">...</code></pre>

Список поддерживаемых языковых классов доступен в справочнике классов . Классы также могут иметь префикс language-или lang-.

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

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

Пользовательская инициализация

Если вам нужно немного больше контроля над инициализацией Highlight.js, вы можете использовать функции highlightBlockи configure Это позволяет вам контролировать, что и когда выделять .

Вот эквивалентный способ вызова initHighlightingOnLoadс использованием jQuery:

1
2
3
4
5
$(document).ready(function() {
  $('pre code').each(function(i, block) {
    hljs.highlightBlock(block);
  });
});

Вместо <pre><code>разметки кода вы можете использовать любые теги. Если вы не используете контейнер, сохраняющий разрывы строк, вам нужно будет настроить Highlight.js для использования тега <br>:

1
2
3
4
5
hljs.configure({useBR: true});

$('div.code').each(function(i, block) {
  hljs.highlightBlock(block);
});

Другие параметры см. в документации для configure.

Веб-работники

Вы можете запустить подсветку внутри веб-воркера, чтобы избежать зависания окна браузера при работе с очень большими фрагментами кода.

В вашем основном скрипте:

1
2
3
4
5
6
addEventListener('load', function() {
  var code = document.querySelector('#code');
  var worker = new Worker('worker.js');
  worker.onmessage = function(event) { code.innerHTML = event.data; }
  worker.postMessage(code.textContent);
})

В рабочем.js:

1
2
3
4
5
onmessage = function(event) {
  importScripts('<path>/highlight.pack.js');
  var result = self.hljs.highlightAuto(event.data);
  postMessage(result.value);
}

Получение библиотеки

Вы можете получить Highlight.js в виде размещенного или пользовательской сборки скрипта браузера или в виде серверного модуля.Скрипт браузера прямо из коробки поддерживает как AMD, так и CommonJS, поэтому при желании вы можете использовать RequireJS или Browserify без необходимости сборка из исходного кода.Серверный модуль также отлично работает с Browserify, но есть возможность использовать сборку, специфичную для браузеров, а не что-то, предназначенное для сервера.Перейдите на страницу загрузки, чтобы увидеть все варианты.

Не ссылайтесь на GitHub напрямую. Библиотека не должна работать прямо из исходного кода, она требует сборки. Если ни один из предварительно упакованных вариантов вам не подходит, обратитесь к документации по сборке .

Пакет, размещенный на CDN, не содержит всех языков. В противном случае он будет слишком большим. Если вы не видите нужный язык в разделе «Общие» , его можно добавить вручную:

1
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>

На Almond.Нужно использовать оптимизатор, чтобы дать модулю имя.Например:

1
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js

Лицензия

Highlight.js выпускается под лицензией BSD. Подробности см. в файле ЛИЦЕНЗИИ .

Ссылки

Официальный сайт библиотеки находится по адресу https://highlightjs.org/ .

Дополнительную подробную документацию по API и другим темам можно найти по адресу http://highlightjs.readthedocs.io/ .

Авторы и участники перечислены в файле AUTHORS.en.txt .