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

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

В загруженном архиве лежит файл "highlight.pack.js" -- полная сжатая версия библиотеки для работы. Все несжатые исходные файлы также есть в пакете, поэтому не стесняйтесь в них смотреть!

Подключите на страницу файл библиотеки, файл стилей и выозвите функцию инициализации:

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

В общем случае, это всё, что нужно. После загрузки страницы скрипт ищет на странице конструкции <pre><code>...</code></pre>, которые традиционно используются для написания кода, и заворачивает синтаксические конструкции в <span>ы, которые стилизуются с помощью CSS.

Дальше есть описание других способов инициализации, стилизации и использования highlight.js с Javascript-фреймворками.

Замена TAB'ов

Вы можете заменить символы TAB ('\x09'), используемые для отступов, на фиксированное количество пробелов или на отдельный <span>, чтобы задать ему какой-нибудь специальный стиль:

<script>
  hljs.tabReplace = '    '; // 4 spaces
  // ... or hljs.tabReplace = '<span class="indent">\t</span>';

  hljs.initHighlightingOnLoad();
</script>

Инициализация вручную

Если вы используете другие теги для блоков кода, вы можете инициализировать их явно с помощью функции highlightBlock(code, tabReplace). Она принимает DOM-элемент с текстом расцвечиваемого кода и опционально - строчку для замены символов TAB.

Например с использованием jQuery код инициализации может выглядеть так:

$(document).ready(function() {
  $('pre code').each(function(i, e) {hljs.highlightBlock(e, '    ')});
});

Если ваш блок кода использует <br> вместо переводов строки (т.е. если это не <pre>), передайте true третьим параметром в highlightBlock:

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

Выбор стилей

Размеченным классами элементам кода можно задать желаемые стили например так:

.comment {
  color: gray;
}

.keyword {
  font-weight: bold;
}

.python .string {
  color: blue;
}

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

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

Полный список классов приведён в файле crossref.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>