1
|
# Highlight.js
|
2
|
|
3
|
Highlight.js нужен для подсветки синтаксиса в примерах кода в блогах,
|
4
|
форумах и вообще на любых веб-страницах. Пользоваться им очень просто,
|
5
|
потому что работает он автоматически: сам находит блоки кода, сам
|
6
|
определяет язык, сам подсвечивает.
|
7
|
|
8
|
Автоопределением языка можно управлять, когда оно не справляется само (см.
|
9
|
дальше "Эвристика").
|
10
|
|
11
|
|
12
|
## Простое использование
|
13
|
|
14
|
Подключите библиотеку и стиль на страницу и повесть вызов подсветки на
|
15
|
загрузку страницы:
|
16
|
|
17
|
```html
|
18
|
<link rel="stylesheet" href="styles/default.css">
|
19
|
<script src="highlight.pack.js"></script>
|
20
|
<script>hljs.initHighlightingOnLoad();</script>
|
21
|
```
|
22
|
|
23
|
Весь код на странице, обрамлённый в теги `<pre><code> .. </code></pre>`
|
24
|
будет автоматически подсвечен. Если вы используете другие теги или хотите
|
25
|
подсвечивать блоки кода динамически, читайте "Инициализацию вручную" ниже.
|
26
|
|
27
|
- Вы можете скачать собственную версию "highlight.pack.js" или сослаться
|
28
|
на захостенный файл, как описано на странице загрузки:
|
29
|
<http://highlightjs.org/download/>
|
30
|
|
31
|
- Стилевые темы можно найти в загруженном архиве или также использовать
|
32
|
захостенные. Чтобы сделать собственный стиль для своего сайта, вам
|
33
|
будет полезен справочник классов в файле [classref.txt][cr], который тоже
|
34
|
есть в архиве.
|
35
|
|
36
|
[cr]: http://github.com/isagalaev/highlight.js/blob/master/classref.txt
|
37
|
|
38
|
|
39
|
## node.js
|
40
|
|
41
|
Highlight.js можно использовать в node.js. Библиотеку со всеми возможными языками можно
|
42
|
установить с NPM:
|
43
|
|
44
|
npm install highlight.js
|
45
|
|
46
|
Также её можно собрать из исходников с только теми языками, которые нужны:
|
47
|
|
48
|
python3 tools/build.py -tnode lang1 lang2 ..
|
49
|
|
50
|
Использование библиотеки:
|
51
|
|
52
|
```javascript
|
53
|
var hljs = require('highlight.js');
|
54
|
|
55
|
// Если вы знаете язык
|
56
|
hljs.highlight(lang, code).value;
|
57
|
|
58
|
// Автоопределение языка
|
59
|
hljs.highlightAuto(code).value;
|
60
|
```
|
61
|
|
62
|
|
63
|
## AMD
|
64
|
|
65
|
Highlight.js можно использовать с загрузчиком AMD-модулей. Для этого его
|
66
|
нужно собрать из исходников следующей командой:
|
67
|
|
68
|
```bash
|
69
|
$ python3 tools/build.py -tamd lang1 lang2 ..
|
70
|
```
|
71
|
|
72
|
Она создаст файл `build/highlight.pack.js`, который является загружаемым
|
73
|
AMD-модулем и содержит все выбранные при сборке языки. Используется он так:
|
74
|
|
75
|
```javascript
|
76
|
require(["highlight.js/build/highlight.pack"], function(hljs){
|
77
|
|
78
|
// Если вы знаете язык
|
79
|
hljs.highlight(lang, code).value;
|
80
|
|
81
|
// Автоопределение языка
|
82
|
hljs.highlightAuto(code).value;
|
83
|
});
|
84
|
```
|
85
|
|
86
|
|
87
|
## Замена TABов
|
88
|
|
89
|
Также вы можете заменить символы TAB ('\x09'), используемые для отступов, на
|
90
|
фиксированное количество пробелов или на отдельный `<span>`, чтобы задать ему
|
91
|
какой-нибудь специальный стиль:
|
92
|
|
93
|
```html
|
94
|
<script type="text/javascript">
|
95
|
hljs.tabReplace = ' '; // 4 spaces
|
96
|
// ... or
|
97
|
hljs.tabReplace = '<span class="indent">\t</span>';
|
98
|
|
99
|
hljs.initHighlightingOnLoad();
|
100
|
</script>
|
101
|
```
|
102
|
|
103
|
|
104
|
## Инициализация вручную
|
105
|
|
106
|
Если вы используете другие теги для блоков кода, вы можете инициализировать их
|
107
|
явно с помощью функции `highlightBlock(code, tabReplace, useBR)`. Она принимает
|
108
|
DOM-элемент с текстом расцвечиваемого кода и опционально - строчку для замены
|
109
|
символов TAB.
|
110
|
|
111
|
Например с использованием jQuery код инициализации может выглядеть так:
|
112
|
|
113
|
```javascript
|
114
|
$(document).ready(function() {
|
115
|
$('pre code').each(function(i, e) {hljs.highlightBlock(e)});
|
116
|
});
|
117
|
```
|
118
|
|
119
|
`highlightBlock` можно также использовать, чтобы подсветить блоки кода,
|
120
|
добавленные на страницу динамически. Только убедитесь, что вы не делаете этого
|
121
|
повторно для уже раскрашенных блоков.
|
122
|
|
123
|
Если ваш блок кода использует `<br>` вместо переводов строки (т.е. если это не
|
124
|
`<pre>`), передайте `true` третьим параметром в `highlightBlock`:
|
125
|
|
126
|
```javascript
|
127
|
$('div.code').each(function(i, e) {hljs.highlightBlock(e, null, true)});
|
128
|
```
|
129
|
|
130
|
|
131
|
## Эвристика
|
132
|
|
133
|
Определение языка, на котором написан фрагмент, делается с помощью
|
134
|
довольно простой эвристики: программа пытается расцветить фрагмент всеми
|
135
|
языками подряд, и для каждого языка считает количество подошедших
|
136
|
синтаксически конструкций и ключевых слов. Для какого языка нашлось больше,
|
137
|
тот и выбирается.
|
138
|
|
139
|
Это означает, что в коротких фрагментах высока вероятность ошибки, что
|
140
|
периодически и случается. Чтобы указать язык фрагмента явно, надо написать
|
141
|
его название в виде класса к элементу `<code>`:
|
142
|
|
143
|
```html
|
144
|
<pre><code class="html">...</code></pre>
|
145
|
```
|
146
|
|
147
|
Можно использовать рекомендованные в HTML5 названия классов:
|
148
|
"language-html", "language-php". Также можно назначать классы на элемент
|
149
|
`<pre>`.
|
150
|
|
151
|
Чтобы запретить расцветку фрагмента вообще, используется класс "no-highlight":
|
152
|
|
153
|
```html
|
154
|
<pre><code class="no-highlight">...</code></pre>
|
155
|
```
|
156
|
|
157
|
|
158
|
## Экспорт
|
159
|
|
160
|
В файле export.html находится небольшая программка, которая показывает и дает
|
161
|
скопировать непосредственно HTML-код подсветки для любого заданного фрагмента кода.
|
162
|
Это может понадобится например на сайте, на котором нельзя подключить сам скрипт
|
163
|
highlight.js.
|
164
|
|
165
|
|
166
|
## Координаты
|
167
|
|
168
|
- Версия: 7.5
|
169
|
- URL: http://highlightjs.org/
|
170
|
|
171
|
Лицензионное соглашение читайте в файле LICENSE.
|
172
|
Список авторов и соавторов читайте в файле AUTHORS.ru.txt
|