forked from friendica/friendica-addons
143 lines
6 KiB
Markdown
143 lines
6 KiB
Markdown
# Highlight.js
|
||
|
||
Highlight.js — это инструмент для подсветки синтаксиса, написанный на JavaScript. Он работает
|
||
и в браузере, и на сервере. Он работает с практически любой HTML разметкой, не
|
||
зависит от каких-либо фреймворков и умеет автоматически определять язык.
|
||
|
||
|
||
## Начало работы
|
||
|
||
Минимум, что нужно сделать для использования highlight.js на веб-странице — это
|
||
подключить библиотеку, CSS-стили и вызывать [`initHighlightingOnLoad`][1]:
|
||
|
||
```html
|
||
<link rel="stylesheet" href="/path/to/styles/default.css">
|
||
<script src="/path/to/highlight.pack.js"></script>
|
||
<script>hljs.initHighlightingOnLoad();</script>
|
||
```
|
||
|
||
Библиотека найдёт и раскрасит код внутри тегов `<pre><code>`, попытавшись
|
||
автоматически определить язык. Когда автоопределение не срабатывает, можно явно
|
||
указать язык в атрибуте class:
|
||
|
||
```html
|
||
<pre><code class="html">...</code></pre>
|
||
```
|
||
|
||
Список поддерживаемых классов языков доступен в [справочнике по классам][2].
|
||
Класс также можно предварить префиксами `language-` или `lang-`.
|
||
|
||
Чтобы отключить подсветку для какого-то блока, используйте класс `nohighlight`:
|
||
|
||
```html
|
||
<pre><code class="nohighlight">...</code></pre>
|
||
```
|
||
|
||
## Инициализация вручную
|
||
|
||
Чтобы иметь чуть больше контроля за инициализацией подсветки, вы можете
|
||
использовать функции [`highlightBlock`][3] и [`configure`][4]. Таким образом
|
||
можно управлять тем, *что* и *когда* подсвечивать.
|
||
|
||
Вот пример инициализации, эквивалентной вызову [`initHighlightingOnLoad`][1], но
|
||
с использованием jQuery:
|
||
|
||
```javascript
|
||
$(document).ready(function() {
|
||
$('pre code').each(function(i, block) {
|
||
hljs.highlightBlock(block);
|
||
});
|
||
});
|
||
```
|
||
|
||
Вы можете использовать любые теги разметки вместо `<pre><code>`. Если
|
||
используете контейнер, не сохраняющий переводы строк, вам нужно сказать
|
||
highlight.js использовать для них тег `<br>`:
|
||
|
||
```javascript
|
||
hljs.configure({useBR: true});
|
||
|
||
$('div.code').each(function(i, block) {
|
||
hljs.highlightBlock(block);
|
||
});
|
||
```
|
||
|
||
Другие опции можно найти в документации функции [`configure`][4].
|
||
|
||
|
||
## Web Workers
|
||
|
||
Подсветку можно запустить внутри web worker'а, чтобы окно
|
||
браузера не подтормаживало при работе с большими кусками кода.
|
||
|
||
В основном скрипте:
|
||
|
||
```javascript
|
||
addEventListener('load', function() {
|
||
var code = document.querySelector('#code');
|
||
var worker = new Worker('worker.js');
|
||
worker.onmessage = function(event) { code.innerHTML = event.data; }
|
||
worker.postMessage(code.textContent);
|
||
})
|
||
```
|
||
|
||
В worker.js:
|
||
|
||
```javascript
|
||
onmessage = function(event) {
|
||
importScripts('<path>/highlight.pack.js');
|
||
var result = self.hljs.highlightAuto(event.data);
|
||
postMessage(result.value);
|
||
}
|
||
```
|
||
|
||
|
||
## Установка библиотеки
|
||
|
||
Highlight.js можно использовать в браузере прямо с CDN хостинга или скачать
|
||
индивидуальную сборку, а также установив модуль на сервере. На
|
||
[странице загрузки][5] подробно описаны все варианты.
|
||
|
||
**Не подключайте GitHub напрямую.** Библиотека не предназначена для
|
||
использования в виде исходного кода, а требует отдельной сборки. Если вам не
|
||
подходит ни один из готовых вариантов, читайте [документацию по сборке][6].
|
||
|
||
**Файл на CDN содержит не все языки.** Иначе он будет слишком большого размера.
|
||
Если нужного вам языка нет в [категории "Common"][5], можно дообавить его
|
||
вручную:
|
||
|
||
```html
|
||
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>
|
||
```
|
||
|
||
**Про Almond.** Нужно задать имя модуля в оптимизаторе, например:
|
||
|
||
```
|
||
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js
|
||
```
|
||
|
||
|
||
## Лицензия
|
||
|
||
Highlight.js распространяется под лицензией BSD. Подробнее читайте файл
|
||
[LICENSE][7].
|
||
|
||
|
||
## Ссылки
|
||
|
||
Официальный сайт билиотеки расположен по адресу <https://highlightjs.org/>.
|
||
|
||
Более подробная документация по API и другим темам расположена на
|
||
<http://highlightjs.readthedocs.io/>.
|
||
|
||
Авторы и контрибьюторы перечислены в файле [AUTHORS.ru.txt][8] file.
|
||
|
||
[1]: http://highlightjs.readthedocs.io/en/latest/api.html#inithighlightingonload
|
||
[2]: http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
|
||
[3]: http://highlightjs.readthedocs.io/en/latest/api.html#highlightblock-block
|
||
[4]: http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
|
||
[5]: https://highlightjs.org/download/
|
||
[6]: http://highlightjs.readthedocs.io/en/latest/building-testing.html
|
||
[7]: https://github.com/isagalaev/highlight.js/blob/master/LICENSE
|
||
[8]: https://github.com/isagalaev/highlight.js/blob/master/AUTHORS.ru.txt
|