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