1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
|
# Highlight.js
Highlight.js нужен для подсветки синтаксиса в примерах кода в блогах,
форумах и вообще на любых веб-страницах. Пользоваться им очень просто,
потому что работает он автоматически: сам находит блоки кода, сам
определяет язык, сам подсвечивает.
Автоопределением языка можно управлять, когда оно не справляется само (см.
дальше "Эвристика").
## Подключение и использование
В загруженном архиве лежит файл "highlight.pack.js" -- полная сжатая версия
библиотеки для работы. Все несжатые исходные файлы также есть в пакете, поэтому
не стесняйтесь в них смотреть!
Скрипт подключается одним файлом и одним вызовом инициализирующей
функции:
<script type="text/javascript" src="highlight.pack.js"></script>
<script type="text/javascript">
hljs.initHighlightingOnLoad();
</script>
Также вы можете заменить символы TAB ('\x09'), используемые для отступов, на
фиксированное количество пробелов или на отдельный `<span>`, чтобы задать ему
какой-нибудь специальный стиль:
<script type="text/javascript">
hljs.tabReplace = ' '; // 4 spaces
// ... or
hljs.tabReplace = '<span class="indent">\t</span>';
hljs.initHighlightingOnLoad();
</script>
Дальше скрипт ищет на странице конструкции `<pre><code>...</code></pre>`,
которые традиционно используются для написания кода, и код в них
размечается на куски, помеченные разными значениями классов.
### Инициализация вручную
Если вы используете другие теги для блоков кода, вы можете инициализировать их
явно с помощью функции `highlightBlock(code, tabReplace)`. Она принимает
DOM-элемент с текстом расцвечиваемого кода и опционально - строчку для замены
символов TAB.
Например с использованием jQuery код инициализации может выглядеть так:
$(document).ready(function() {
$('pre code').each(function(i, e) {hljs.highlightBlock(e, ' ')});
});
### Выбор стилей
Размеченным классами элементам кода можно задать желаемые стили например так:
.comment {
color: gray;
}
.keyword {
font-weight: bold;
}
.python .string {
color: blue;
}
.html .atribute .value {
color: green;
}
В комплекте с highlight.js идут несколько стилевых тем в директории styles,
которые можно использовать напрямую или как основу для собственных экспериментов.
Полный список классов для разных языков приведен ниже ("Языки").
## Экспорт
В файле export.html находится небольшая программка, которая показывает и дает
скопировать непосредственно HTML-код подсветки для любого заданного фрагмента кода.
Это может понадобится например на сайте, на котором нельзя подключить сам скрипт
highlight.js.
## Языки
В списке приведены все языки, которые знает библиотека с классами,
соответствующими различным синтаксическим частям. В скобках после
названий языков указаны идентификаторы языков, используемые в качестве
классов элемента `<code>`.
Python ("python"):
keyword ключевое слово языка
built_in стандартные значения (None, False, True и Ellipsis)
number число
string строка (любого типа)
comment комментарий
decorator @-декоратор функции
function заголовок функции "def some_name(...):"
class заголовок класса "class SomeName(...):"
title название функции или класса внутри заголовка
params все, что в скобках внутри заголовка функции или класса
Результаты профайлинга Питона ("profile"):
number число
string строка
builtin встроенная функция в строке результата
filename имя файла в строке результата
summary итоговые результаты профилирования
header заголовок таблицы результатов
keyword название колонки в заголовке
function название функции в строке результата (включая скобки)
title само название функци в строке результата (без скобок)
Ruby ("ruby"):
keyword ключевое слово языка
string строка
subst внутристроковая подстановка (#{...})
comment комментарий
yardoctag тег YARD
function заголовок функции "def ..."
class заголовок класса "class ..."
title название функции или класса внутри заголовка
parent название родительского класса
symbol символ
instancevar переменная класса
Perl ("perl"):
keyword ключевое слово языка
comment комментарий
number число
string строка
regexp регулярное выражение
sub заголовок процедуры (от "sub" до "{")
variable переменная, начинающаяся с "$", "%", "@"
operator оператор
pod документация (plain old doc)
PHP ("php"):
keyword ключевое слово языка
number число
string строка (любого типа)
comment комментарий
phpdoc параметры phpdoc в комментарии
variable переменная, начинающаяся с "$"
preprocessor метки препроцессора: "<?php" and "?>"
Scala ("scala"):
keyword ключевое слово языка
number число
string строка
comment комментарий
annotaion аннотация
javadoc javadoc-комментарии
javadoctag @-тег в javadoc
class заголовок класса
title название класса внутри заголовка
params все, что в скобках внутри заголовка класса
inheritance слова "extends" и "with" внутри заголовка класса
XML ("xml"):
tag любой открывающий или закрывающий тег от "<" до ">"
comment комментарий
pi инструкции обработки (<? ... ?>)
cdata раздел CDATA
attribute атрибут
value значение атрибута
HTML ("html"):
keyword тег языка HTML
tag любой открывающий или закрывающий тег от "<" до ">"
comment комментарий
doctype объявление <!DOCTYPE ... >
attribute атрибут внутри тега со значением или без
value значение атрибута
CSS ("css"):
keyword тег языка HTML в селекторах или свойство CSS в правилах
id #some_name в селекторах
class .some_name в селекторах
at_rule @-rule до первого "{" или ";"
attr_selector селектор атрибутов (квадатные скобоки в a[href^=http://])
pseudo псевдо-классы и элементы (:after, ::after и т.д.)
comment комментарий
rules все от "{" до "}"
value значение свойства внутри правила, все от ":" до ";" или
до конца блока правил
number число внутри значения
string строка внутри значения
hexcolor шестнадцатеричный цвет (#FFFFFF) внутри значения
function CSS-функция внутри значения
params все от "(" до ")" внутри функции
Django ("django"):
keyword тег HTML в HTML, встроенные шаблонные теги и фильтры в шаблонах
tag любой открывающий или закрывающий тег от "<" до ">"
comment комментарий
doctype объявление <!DOCTYPE ... >
attribute атрибут внутри тега со значением или без
value значение атрибута
template_tag шаблонный тег {% .. %}
variable шаблонная переменная {{ .. }}
template_comment шаблонный комментарий, и {# .. #}, и {% comment %}
filter фильтр от "|" до следующего фильтра или до конца тега
argument аргумент фильтра
Javascript ("javascript"):
keyword ключевое слово языка
comment комментарий
number число
literal специальное слово: "true", "false" и "null"
string строка
regexp регулярное выражение
function заголовок функции
title название функции внутри заголовка
params все, что в скобках внутри заголовка функции
VBScript ("vbscript"):
keyword ключевое слово языка
comment комментарий
number число
string строка
built_in встроенная функция
Lua ("lua"):
keyword ключевое слово языка
number число
string строка
comment комментарий
built_in встроенный оператор
function заголовок функции
title название функции внутри заголовка
params все, что в скобках внутри заголовка функции
long_brackets многострочная строка в [=[ .. ]=]
Delphi ("delphi"):
keyword ключевое слово языка
comment комментарий (любого типа)
number число
string строка
function заголовок функции, процедуры, конструктора или деструктора
title название функции, процедуры, конструктора или деструктора
внутри заголовка
params все, что в скобках внутри заголовка функций
class тело класса от "= class" до "end;"
Java ("java"):
keyword ключевое слово языка
number число
string строка
comment комментарий
annotaion аннотация
javadoc javadoc-комментарии
class заголовок класса от "class" до "{"
title название класса внутри заголовка
params все, что в скобках внутри заголовка класса
inheritance слова "extends" и "implements" внутри заголовка класса
C++ ("cpp"):
keyword ключевое слово языка
built_in тип из стандартной библиотеки (включая STL)
number число
string строка и одиночный символ
comment комментарий
preprocessor директива препроцессора
stl_container инстанцирование STL-контейнеров ("vector<...>")
C# ("cs"):
keyword ключевое слово языка
number число
string строка (включая @"..")
comment комментарий
xmlDocTag тег в xmldoc ("///", "<!--", "-->", "<..>")
RenderMan RSL ("rsl"):
keyword ключевое слово языка
number число
string строка
comment комментарий
preprocessor директива препроцессора
shader ключевое слово шейдеров
shading ключевое слово затенений
built_in встроенная функция
RenderMan RIB ("rib"):
keyword ключевое слово языка
number число
string строка
comment комментарий
commands команда
Maya Embedded Language ("mel"):
keyword ключевое слово языка
number число
string строка
comment комментарий
variable переменная
SQL ("sql"):
keyword ключевое слово (в основном из SQL'92 и SQL'99)
number число
string строка (любого типа: "..", '..', `..`)
comment комментарий
aggregate агрегатная функция
Smalltalk ("smalltalk"):
keyword ключевое слово
number число
string строка
comment комментарий
symbol символ
array массив
class имя класса
char буква
localvars блок локальных переменных
Lisp ("lisp"):
keyword ключевое слово
number число
string строка
comment комментарий
variable переменная
literal b, t и nil
list неквотированный список
title первый символ неквотированного списка
body остаток неквотированного списка
quoted_list квотированный список: и "(quote .. )", и "'(..)"
Ini ("ini"):
title заголовок секции
value значение настройки любого типа
string строка
number число
keyword ключевое слово булевского значения
Apache ("apache"):
keyword ключевое слово
number число
comment комментарий
literal "On" и "Off"
sqbracket переменная в rewrite'ах "%{..}"
cbracket опции в rewrite'ах "[..]"
tag начало и конец раздела конфига
Nginx ("nginx"):
keyword ключевое слово
string строка
number число
comment комментарий
built_in встроенная константа
variable $-переменная
DOS ("dos"):
keyword ключевое слово
flow команда .bat-файла
stream специальные файлы DOS ("con", "prn", ...)
winutils некоторые (см. dos.js за списком)
envvar переменная окружения
Bash ("bash"):
keyword ключевое слово
string строка
number число
comment комментарий
literal специальное слово: "true" и "false"
variable переменная
shebang заголовок интерпретатора скрипта
Diff ("diff"):
header заголовок файла
chunk заголовок куска внутри файла
addition добавленные строки
deletion удаленные строки
change измененные строки
Axapta ("axapta"):
keyword ключевое слово языка
number число
string строка
comment комментарий
class заголовок класса от "class" до "{"
title название класса внутри заголовка
params все, что в скобках внутри заголовка класса
inheritance слова "extends" и "implements" внутри заголовка класса
preprocessor директива препроцессора
1С ("1c"):
keyword ключевое слово языка
number число
date дата
string строка
comment комментарий
function заголовок функции или процедуры
title название функции внутри заголовка
params все, что в скобках внутри заголовка функции
preprocessor директива препроцессора
AVR ассемблер ("avrasm"):
keyword ключевое слово языка
built_in предопределенный регистр
number число
string строка
comment комментарий
label метка
preprocessor директива препроцессора
localvars подстановка в .macro
Parser3 ("parser3"):
keyword ключевое слово языка
number число
comment комментарий
variable переменная, начинающаяся с "$"
preprocessor директива препроцессора
title пользовательское имя, начинающееся с "@"
TeX ("tex"):
comment комментарий
number число
command команда
parameter параметр
formula формула
special специальный символ
## Эвристика
Определение языка, на котором написан фрагмент, делается с помощью
довольно простой эвристики: программа пытается расцветить фрагмент всеми
языками подряд, и для каждого языка считает количество подошедших
синтаксически конструкций и ключевых слов. Для какого языка нашлось больше,
тот и выбирается.
Это означает, что в коротких фрагментах высока вероятность ошибки, что
периодически и случается. Чтобы указать язык фрагмента явно, надо написать
его название в виде класса к элементу `<code>`:
<pre><code class="html">...</code></pre>
Можно использовать рекомендованные в HTML5 названия классов:
"language-html", "language-php". Также можно назначать классы на элемент
`<pre>`.
Чтобы запретить расцветку фрагмента вообще, используется класс "no-highlight":
<pre><code class="no-highlight">...</code></pre>
## Координаты
Версия: 5.11
URL: http://softwaremaniacs.org/soft/highlight/
Автор: Иван Сагалаев (Maniac@SoftwareManiacs.Org)
Лицензионное соглашение читайте в файле LICENSE.
Список соавторов читайте в файле AUTHORS.ru.txt
|