|
108
|
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://softwaremaniacs.org/soft/highlight/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 ## Замена TABов
|
|
|
40
|
|
|
41 Также вы можете заменить символы TAB ('\x09'), используемые для отступов, на
|
|
|
42 фиксированное количество пробелов или на отдельный `<span>`, чтобы задать ему
|
|
|
43 какой-нибудь специальный стиль:
|
|
|
44
|
|
|
45 ```html
|
|
|
46 <script type="text/javascript">
|
|
|
47 hljs.tabReplace = ' '; // 4 spaces
|
|
|
48 // ... or
|
|
|
49 hljs.tabReplace = '<span class="indent">\t</span>';
|
|
|
50
|
|
|
51 hljs.initHighlightingOnLoad();
|
|
|
52 </script>
|
|
|
53 ```
|
|
|
54
|
|
|
55
|
|
|
56 ## Инициализация вручную
|
|
|
57
|
|
|
58 Если вы используете другие теги для блоков кода, вы можете инициализировать их
|
|
|
59 явно с помощью функции `highlightBlock(code, tabReplace, useBR)`. Она принимает
|
|
|
60 DOM-элемент с текстом расцвечиваемого кода и опционально - строчку для замены
|
|
|
61 символов TAB.
|
|
|
62
|
|
|
63 Например с использованием jQuery код инициализации может выглядеть так:
|
|
|
64
|
|
|
65 ```javascript
|
|
|
66 $(document).ready(function() {
|
|
|
67 $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
|
|
|
68 });
|
|
|
69 ```
|
|
|
70
|
|
|
71 `highlightBlock` можно также использовать, чтобы подсветить блоки кода,
|
|
|
72 добавленные на страницу динамически. Только убедитесь, что вы не делаете этого
|
|
|
73 повторно для уже раскрашенных блоков.
|
|
|
74
|
|
|
75 Если ваш блок кода использует `<br>` вместо переводов строки (т.е. если это не
|
|
|
76 `<pre>`), передайте `true` третьим параметром в `highlightBlock`:
|
|
|
77
|
|
|
78 ```javascript
|
|
|
79 $('div.code').each(function(i, e) {hljs.highlightBlock(e, null, true)});
|
|
|
80 ```
|
|
|
81
|
|
|
82
|
|
|
83 ## Эвристика
|
|
|
84
|
|
|
85 Определение языка, на котором написан фрагмент, делается с помощью
|
|
|
86 довольно простой эвристики: программа пытается расцветить фрагмент всеми
|
|
|
87 языками подряд, и для каждого языка считает количество подошедших
|
|
|
88 синтаксически конструкций и ключевых слов. Для какого языка нашлось больше,
|
|
|
89 тот и выбирается.
|
|
|
90
|
|
|
91 Это означает, что в коротких фрагментах высока вероятность ошибки, что
|
|
|
92 периодически и случается. Чтобы указать язык фрагмента явно, надо написать
|
|
|
93 его название в виде класса к элементу `<code>`:
|
|
|
94
|
|
|
95 ```html
|
|
|
96 <pre><code class="html">...</code></pre>
|
|
|
97 ```
|
|
|
98
|
|
|
99 Можно использовать рекомендованные в HTML5 названия классов:
|
|
|
100 "language-html", "language-php". Также можно назначать классы на элемент
|
|
|
101 `<pre>`.
|
|
|
102
|
|
|
103 Чтобы запретить расцветку фрагмента вообще, используется класс "no-highlight":
|
|
|
104
|
|
|
105 ```html
|
|
|
106 <pre><code class="no-highlight">...</code></pre>
|
|
|
107 ```
|
|
|
108
|
|
|
109
|
|
|
110 ## Экспорт
|
|
|
111
|
|
|
112 В файле export.html находится небольшая программка, которая показывает и дает
|
|
|
113 скопировать непосредственно HTML-код подсветки для любого заданного фрагмента кода.
|
|
|
114 Это может понадобится например на сайте, на котором нельзя подключить сам скрипт
|
|
|
115 highlight.js.
|
|
|
116
|
|
|
117
|
|
|
118 ## Координаты
|
|
|
119
|
|
|
120 - Версия: 7.0
|
|
|
121 - URL: http://softwaremaniacs.org/soft/highlight/
|
|
|
122 - Автор: Иван Сагалаев (<maniac@softwaremaniacs.org>)
|
|
|
123
|
|
|
124 Лицензионное соглашение читайте в файле LICENSE.
|
|
|
125 Список соавторов читайте в файле AUTHORS.ru.txt
|
