Подключение и использование
Скрипт подключается одним файлом и одним вызовом инициализирующей
функции:
<script type="text/javascript" src="highlight.js"></script>
<script type="text/javascript">
initHighlightingOnLoad();
</script>
Автоматическое определение языков может работать слегка медленно, когда
в него включено много языков, а фрагменты кода обширны. Чтобы ускорить
процесс, можно перечислить в вызове инициализирующей функции только те
языки, которые используются в тексте:
<script type="text/javascript">
initHighlightingOnLoad('html', 'css');
</script>
При вызов таким образом highlight.js динамически подгружает соответствующие
языковые файлы и таким образом весит меньше, чем с набором по умолчанию,
который включает все реализованные языки. Полный список идентификаторов языков
есть в readme.rus.txt.
Дальше скрипт ищет на странице конструкции <pre><code>...</code></pre>,
которые традиционно используются для написания кода, и код в них
размечается на куски, помеченные разными значениями классов. Классам
этим затем надо задать в стилях нужные цвета например так:
.comment {
color: gray;
}
.keyword {
font-weight: bold;
}
.python .string {
color: blue;
}
.html .atribute .value {
color: green;
}
Можно использовать sample.css из комплекта как стартовую точку для собственного
стиля.
Полный список классов для разных языков приведен в readme.rus.txt.
Плагин для WordPress
Хоть highlight.js и подключается к чему угодно, он отдельно оформлен в виде плагина для WordPress для пущего удобства. В случае WordPress это также удобно, если блог находится на общественном сервере, где вы не можете свободно редактировать файлы.
Для установки плагина надо скопировать всю директорию с файлами highlight.js в
директорию плагинов WordPress. После этого в панели плагинов его можно
будет включать и отключать. В меню Options также добавляется страничка
highlight.js, где можно настраивать список языков и CSS-стили. Удобно до одурения :-).
Экспорт
В файле export.html находится небольшая программка, которая показывает и дает
скопировать непосредственно HTML-код подсветки для любого заданного фрагмента кода.
Это может понадобится например на сайте, на котором нельзя подключить сам скрипт
highlight.js.
Эвристика
Определение языка, на котором написан фрагмент, делается с помощью
довольно простой эвристики: программа пытается расцветить фрагмент всеми
языками подряд, и для каждого языка считает количество подошедших
синтаксически конструкций и ключевых слов. Для какого языка нашлось больше,
тот и выбирается.
Это означает, что в коротких фрагментах высока вероятность ошибки, что
периодически и случается. Чтобы указать язык фрагмента явно, надо написать
его название в виде класса к элементу <code>:
<pre><code class="html">...</code></pre>
Чтобы запретить расцветку фрагмента вообще, используется класс "no-highlight":
<pre><code class="no-highlight">...</code></pre>
