Proyectos de Subversion Moodle

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
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