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.

101 lines
4.7 KiB

  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. Список поддерживаемых классов языков доступен в [справочнике по классам][8].
  20. Класс также можно предваоить префиксами `language-` или `lang-`.
  21. Чтобы отключить подсветку для какого-то блока, используйте класс `nohighlight`:
  22. ```html
  23. <pre><code class="nohighlight">...</code></pre>
  24. ```
  25. ## Инициализация вручную
  26. Чтобы иметь чуть больше контроля за инициализацией подсветки, вы можете
  27. использовать функции [`highlightBlock`][2] и [`configure`][3]. Таким образом
  28. можно управлять тем, *что* подсвечивать и *когда*.
  29. Вот пример инициализация, эквивалентной вызову [`initHighlightingOnLoad`][1], но
  30. с использованием jQuery:
  31. ```javascript
  32. $(document).ready(function() {
  33. $('pre code').each(function(i, block) {
  34. hljs.highlightBlock(block);
  35. });
  36. });
  37. ```
  38. Вы можете использовать любые теги разметки вместо `<pre><code>`. Если
  39. используете контейнер, не сохраняющий переводы строк, вам нужно сказать
  40. highlight.js использовать для них тег `<br>`:
  41. ```javascript
  42. hljs.configure({useBR: true});
  43. $('div.code').each(function(i, block) {
  44. hljs.highlightBlock(block);
  45. });
  46. ```
  47. Другие опции можно найти в документации функции [`configure`][3].
  48. ## Установка библиотеки
  49. Highlight.js можно использовать в браузере прямо с CDN хостинга или скачать
  50. индивидуальную сборку, а также установив модуль на сервере. На
  51. [страница загрузки][4] подробно описаны все варианты.
  52. Обратите внимание, что библиотека не предназначена для использования в виде
  53. исходного кода на GitHub, а требует отдельной сборки. Если вам не подходит ни
  54. один из готовых вариантов, читайте [документацию по сборке][5].
  55. ## Лицензия
  56. Highlight.js распространяется под лицензией BSD. Подробнее читайте файл
  57. [LICENSE][10].
  58. ## Ссылки
  59. Официальный сайт билиотеки расположен по адресу <https://highlightjs.org/>.
  60. Более подробная документация по API и другим темам расположена на
  61. <http://highlightjs.readthedocs.org/>.
  62. Авторы и контрибьютора перечислена в файле [AUTHORS.ru.txt][9] file.
  63. [1]: http://highlightjs.readthedocs.org/en/latest/api.html#inithighlightingonload
  64. [2]: http://highlightjs.readthedocs.org/en/latest/api.html#highlightblock-block
  65. [3]: http://highlightjs.readthedocs.org/en/latest/api.html#configure-options
  66. [4]: https://highlightjs.org/download/
  67. [5]: http://highlightjs.readthedocs.org/en/latest/building-testing.html
  68. [8]: http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html
  69. [9]: https://github.com/isagalaev/highlight.js/blob/master/AUTHORS.ru.txt
  70. [10]: https://github.com/isagalaev/highlight.js/blob/master/LICENSE