Autoría | Ultima modificación | Ver Log |
# Highlight.jsHighlight.js нужен для подсветки синтаксиса в примерах кода в блогах,форумах и вообще на любых веб-страницах. Пользоваться им очень просто,потому что работает он автоматически: сам находит блоки кода, самопределяет язык, сам подсвечивает.Автоопределением языка можно управлять, когда оно не справляется само (см.дальше "Эвристика").## Простое использованиеПодключите библиотеку и стиль на страницу и повесть вызов подсветки назагрузку страницы:```html<link rel="stylesheet" href="styles/default.css"><script src="highlight.pack.js"></script><script>hljs.initHighlightingOnLoad();</script>```Весь код на странице, обрамлённый в теги `<pre><code> .. </code></pre>`будет автоматически подсвечен. Если вы используете другие теги или хотитеподсвечивать блоки кода динамически, читайте "Инициализацию вручную" ниже.- Вы можете скачать собственную версию "highlight.pack.js" или сослатьсяна захостенный файл, как описано на странице загрузки:<http://highlightjs.org/download/>- Стилевые темы можно найти в загруженном архиве или также использоватьзахостенные. Чтобы сделать собственный стиль для своего сайта, вамбудет полезен [CSS classes reference][cr], который тоже есть в архиве.[cr]: http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html## node.jsHighlight.js можно использовать в node.js. Библиотеку со всеми возможными языками можноустановить с NPM:npm install highlight.jsТакже её можно собрать из исходников с только теми языками, которые нужны:python3 tools/build.py -tnode lang1 lang2 ..Использование библиотеки:```javascriptvar hljs = require('highlight.js');// Если вы знаете языкhljs.highlight(lang, code).value;// Автоопределение языкаhljs.highlightAuto(code).value;```## AMDHighlight.js можно использовать с загрузчиком AMD-модулей. Для этого егонужно собрать из исходников следующей командой:```bash$ python3 tools/build.py -tamd lang1 lang2 ..```Она создаст файл `build/highlight.pack.js`, который является загружаемымAMD-модулем и содержит все выбранные при сборке языки. Используется он так:```javascriptrequire(["highlight.js/build/highlight.pack"], function(hljs){// Если вы знаете языкhljs.highlight(lang, code).value;// Автоопределение языкаhljs.highlightAuto(code).value;});```## Замена TABовТакже вы можете заменить символы TAB ('\x09'), используемые для отступов, нафиксированное количество пробелов или на отдельный `<span>`, чтобы задать емукакой-нибудь специальный стиль:```html<script type="text/javascript">hljs.configure({tabReplace: ' '}); // 4 spaces// ... orhljs.configure({tabReplace: '<span class="indent">\t</span>'});hljs.initHighlightingOnLoad();</script>```## Инициализация вручнуюЕсли вы используете другие теги для блоков кода, вы можете инициализировать ихявно с помощью функции `highlightBlock(code)`. Она принимает DOM-элемент стекстом расцвечиваемого кода и опционально - строчку для замены символов TAB.Например с использованием jQuery код инициализации может выглядеть так:```javascript$(document).ready(function() {$('pre code').each(function(i, e) {hljs.highlightBlock(e)});});````highlightBlock` можно также использовать, чтобы подсветить блоки кода,добавленные на страницу динамически. Только убедитесь, что вы не делаете этогоповторно для уже раскрашенных блоков.Если ваш блок кода использует `<br>` вместо переводов строки (т.е. если это не`<pre>`), включите опцию `useBR`:```javascripthljs.configure({useBR: true});$('div.code').each(function(i, e) {hljs.highlightBlock(e)});```## ЭвристикаОпределение языка, на котором написан фрагмент, делается с помощьюдовольно простой эвристики: программа пытается расцветить фрагмент всемиязыками подряд, и для каждого языка считает количество подошедшихсинтаксически конструкций и ключевых слов. Для какого языка нашлось больше,тот и выбирается.Это означает, что в коротких фрагментах высока вероятность ошибки, чтопериодически и случается. Чтобы указать язык фрагмента явно, надо написатьего название в виде класса к элементу `<code>`:```html<pre><code class="html">...</code></pre>```Можно использовать рекомендованные в HTML5 названия классов:"language-html", "language-php". Также можно назначать классы на элемент`<pre>`.Чтобы запретить расцветку фрагмента вообще, используется класс "no-highlight":```html<pre><code class="no-highlight">...</code></pre>```## ЭкспортВ файле export.html находится небольшая программка, которая показывает и даетскопировать непосредственно HTML-код подсветки для любого заданного фрагмента кода.Это может понадобится например на сайте, на котором нельзя подключить сам скриптhighlight.js.## Координаты- Версия: 8.0- URL: http://highlightjs.org/Лицензионное соглашение читайте в файле LICENSE.Список авторов и соавторов читайте в файле AUTHORS.ru.txt