Highlight.js нужен для подсветки синтаксиса в примерах кода в блогах, форумах и вообще на любых веб-страницах. Пользоваться им очень просто, потому что работает он автоматически: сам находит блоки кода, сам определяет язык, сам подсвечивает.

Этот автоматизм не только удобен, но и делает возможным подсветку кода, даже если текст набирается каким-нибудь синтаксисом вроде Markdown, где нет возможности легко и просто проставить нужный class для HTML-элемента кода.

Программа знает такие языки:

  • Python
  • Ruby
  • Perl
  • PHP
  • XML
  • HTML
  • CSS
  • Django
  • Javascript
  • VBScript
  • Delphi
  • Java
  • C++
  • Lisp
  • RenderMan (RSL и RIB)
  • Maya Embedded Language
  • SQL
  • SmallTalk
  • Axapta
  • Ini
  • Diff
  • DOS .bat
  • Bash

Ну и конечно я приглашаю всех поучаствовать в развитии программы. Программисты могут добавить свой любимый язык, а дизайнеры — нарисовать стилевую темку.

Скачать версия 4.2.1

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

Скрипт подключается одним файлом и одним вызовом инициализирующей функции:

<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>

Новости

Инсталляции

Сайты, где используется highlight.js