Подключение и использование
В загруженном архиве лежит файл "highlight.pack.js" -- полная сжатая версия библиотеки для работы. Все несжатые исходные файлы также есть в пакете, поэтому не стесняйтесь в них смотреть!
Скрипт подключается одним файлом и одним вызовом инициализирующей функции:
<script type="text/javascript" src="highlight.pack.js"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>
Также вы можете заменить символы TAB ('\x09'), используемые для отступов, на
фиксированное количество пробелов или на отдельный <span>, чтобы задать ему
какой-нибудь специальный стиль:
<script type="text/javascript">
hljs.tabReplace = ' '; // 4 spaces
// ... or
hljs.tabReplace = '<span class="indent">\t</span>';
hljs.initHighlightingOnLoad();
</script>
Дальше скрипт ищет на странице конструкции <pre><code>...</code></pre>,
которые традиционно используются для написания кода, и код в них
размечается на куски, помеченные разными значениями классов.
Инициализация вручную
Если вы используете другие теги для блоков кода, вы можете инициализировать их
явно с помощью функции highlightBlock(code, tabReplace). Она принимает
DOM-элемент с текстом расцвечиваемого кода и опционально - строчку для замены
символов TAB.
Например с использованием jQuery код инициализации может выглядеть так:
$(document).ready(function() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e, ' ')});
});
Выбор стилей
Размеченным классами элементам кода можно задать желаемые стили например так:
.comment {
color: gray;
}
.keyword {
font-weight: bold;
}
.python .string {
color: blue;
}
.html .atribute .value {
color: green;
}
В комплекте с highlight.js идут несколько стилевых тем в директории styles, которые можно использовать напрямую или как основу для собственных экспериментов.
Полный список классов для разных языков приведен в файле readme.rus.txt.
Экспорт
В файле export.html находится небольшая программка, которая показывает и дает скопировать непосредственно HTML-код подсветки для любого заданного фрагмента кода. Это может понадобится например на сайте, на котором нельзя подключить сам скрипт highlight.js.
Эвристика
Определение языка, на котором написан фрагмент, делается с помощью довольно простой эвристики: программа пытается расцветить фрагмент всеми языками подряд, и для каждого языка считает количество подошедших синтаксически конструкций и ключевых слов. Для какого языка нашлось больше, тот и выбирается.
Это означает, что в коротких фрагментах высока вероятность ошибки, что
периодически и случается. Чтобы указать язык фрагмента явно, надо написать
его название в виде класса к элементу <code>:
<pre><code class="html">...</code></pre>
Можно использовать рекомендованные в HTML5 названия классов:
"language-html", "language-php". Также можно назначать классы на элемент
<pre>.
Чтобы запретить расцветку фрагмента вообще, используется класс "no-highlight":
<pre><code class="no-highlight">...</code></pre>