highlight.js: описание

Подключение и использование

В загруженном архиве лежит файл "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>

Несмотря на то, что highlight.pack.js уже содержит только те языки, которые вы собираетесь использовать, иногда возникает нужда еще больше оганичить набор языков, используемых на странице. Это достигается перечислением их имен при инициализации:

<script type="text/javascript">
  hljs.initHighlightingOnLoad('html', 'css');
</script>

Полный список классов для разных языков приведен ниже ("Языки").

Дальше скрипт ищет на странице конструкции <pre><code>...</code></pre>, которые традиционно используются для написания кода, и код в них размечается на куски, помеченные разными значениями классов. Классам этим затем надо задать в стилях нужные цвета например так:

.comment {
  color: gray;
}

.keyword {
  font-weight: bold;
}

.python .string {
  color: blue;
}

.html .atribute .value {
  color: green;
}

В комплекте с highlight.js идут несколько стилевых тем в директории styles, которые можно использовать напрямую или как основу для собственных экспериментов.

Плагин к WordPress

Вообще, подключение highlight.js к блогу на WordPress ничем не отличается от подключения куда-либо еще. Однако он может быть подключен к блогу и как плагин. Это удобно, если блог находится на общественном сервере, где вы не можете свободно редактировать файлы, или просто если вы привыкли пользоваться плагинами.

Для установки плагина надо скопировать всю директорию с файлами highlight.js в директорию плагинов WordPress. После этого в панели плагинов его можно будет включать и отключать. В меню Options также добавляется страничка highlight.js, где можно настраивать список языков и CSS-стили. Удобно до одурения :-).

Экспорт

В файле 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>