NoteOnMe博客平台搭建
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

142 lines
6.0 KiB

3 years ago
  1. # Highlight.js
  2. Highlight.js — это инструмент для подсветки синтаксиса, написанный на JavaScript. Он работает
  3. и в браузере, и на сервере. Он работает с практически любой HTML разметкой, не
  4. зависит от каких-либо фреймворков и умеет автоматически определять язык.
  5. ## Начало работы
  6. Минимум, что нужно сделать для использования highlight.js на веб-странице — это
  7. подключить библиотеку, CSS-стили и вызывать [`initHighlightingOnLoad`][1]:
  8. ```html
  9. <link rel="stylesheet" href="/path/to/styles/default.css">
  10. <script src="/path/to/highlight.pack.js"></script>
  11. <script>hljs.initHighlightingOnLoad();</script>
  12. ```
  13. Библиотека найдёт и раскрасит код внутри тегов `<pre><code>`, попытавшись
  14. автоматически определить язык. Когда автоопределение не срабатывает, можно явно
  15. указать язык в атрибуте class:
  16. ```html
  17. <pre><code class="html">...</code></pre>
  18. ```
  19. Список поддерживаемых классов языков доступен в [справочнике по классам][2].
  20. Класс также можно предварить префиксами `language-` или `lang-`.
  21. Чтобы отключить подсветку для какого-то блока, используйте класс `nohighlight`:
  22. ```html
  23. <pre><code class="nohighlight">...</code></pre>
  24. ```
  25. ## Инициализация вручную
  26. Чтобы иметь чуть больше контроля за инициализацией подсветки, вы можете
  27. использовать функции [`highlightBlock`][3] и [`configure`][4]. Таким образом
  28. можно управлять тем, *что* и *когда* подсвечивать.
  29. Вот пример инициализации, эквивалентной вызову [`initHighlightingOnLoad`][1], но
  30. с использованием `document.addEventListener`:
  31. ```js
  32. document.addEventListener('DOMContentLoaded', (event) => {
  33. document.querySelectorAll('pre code').forEach((block) => {
  34. hljs.highlightBlock(block);
  35. });
  36. });
  37. ```
  38. Вы можете использовать любые теги разметки вместо `<pre><code>`. Если
  39. используете контейнер, не сохраняющий переводы строк, вам нужно сказать
  40. highlight.js использовать для них тег `<br>`:
  41. ```js
  42. hljs.configure({useBR: true});
  43. document.querySelectorAll('div.code').forEach((block) => {
  44. hljs.highlightBlock(block);
  45. });
  46. ```
  47. Другие опции можно найти в документации функции [`configure`][4].
  48. ## Web Workers
  49. Подсветку можно запустить внутри web worker'а, чтобы окно
  50. браузера не подтормаживало при работе с большими кусками кода.
  51. В основном скрипте:
  52. ```js
  53. addEventListener('load', () => {
  54. const code = document.querySelector('#code');
  55. const worker = new Worker('worker.js');
  56. worker.onmessage = (event) => { code.innerHTML = event.data; }
  57. worker.postMessage(code.textContent);
  58. });
  59. ```
  60. В worker.js:
  61. ```js
  62. onmessage = (event) => {
  63. importScripts('<path>/highlight.pack.js');
  64. const result = self.hljs.highlightAuto(event.data);
  65. postMessage(result.value);
  66. };
  67. ```
  68. ## Установка библиотеки
  69. Highlight.js можно использовать в браузере прямо с CDN хостинга или скачать
  70. индивидуальную сборку, а также установив модуль на сервере. На
  71. [странице загрузки][5] подробно описаны все варианты.
  72. **Не подключайте GitHub напрямую.** Библиотека не предназначена для
  73. использования в виде исходного кода, а требует отдельной сборки. Если вам не
  74. подходит ни один из готовых вариантов, читайте [документацию по сборке][6].
  75. **Файл на CDN содержит не все языки.** Иначе он будет слишком большого размера.
  76. Если нужного вам языка нет в [категории "Common"][5], можно дообавить его
  77. вручную:
  78. ```html
  79. <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>
  80. ```
  81. **Про Almond.** Нужно задать имя модуля в оптимизаторе, например:
  82. ```
  83. r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js
  84. ```
  85. ## Лицензия
  86. Highlight.js распространяется под лицензией BSD. Подробнее читайте файл
  87. [LICENSE][7].
  88. ## Ссылки
  89. Официальный сайт билиотеки расположен по адресу <https://highlightjs.org/>.
  90. Более подробная документация по API и другим темам расположена на
  91. <http://highlightjs.readthedocs.io/>.
  92. Авторы и контрибьюторы перечислены в файле [AUTHORS.ru.txt][8] file.
  93. [1]: http://highlightjs.readthedocs.io/en/latest/api.html#inithighlightingonload
  94. [2]: http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html
  95. [3]: http://highlightjs.readthedocs.io/en/latest/api.html#highlightblock-block
  96. [4]: http://highlightjs.readthedocs.io/en/latest/api.html#configure-options
  97. [5]: https://highlightjs.org/download/
  98. [6]: http://highlightjs.readthedocs.io/en/latest/building-testing.html
  99. [7]: https://github.com/highlightjs/highlight.js/blob/master/LICENSE
  100. [8]: https://github.com/highlightjs/highlight.js/blob/master/AUTHORS.ru.txt