国内流行的内容管理系统(CMS)多端全媒体解决方案 https://www.dedebiz.com
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.

README.ru.md 7.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. # Highlight.js
  2. Highlight.js нужен для подсветки синтаксиса в примерах кода в блогах,
  3. форумах и вообще на любых веб-страницах. Пользоваться им очень просто,
  4. потому что работает он автоматически: сам находит блоки кода, сам
  5. определяет язык, сам подсвечивает.
  6. Автоопределением языка можно управлять, когда оно не справляется само (см.
  7. дальше "Эвристика").
  8. ## Простое использование
  9. Подключите библиотеку и стиль на страницу и повесть вызов подсветки на
  10. загрузку страницы:
  11. ```html
  12. <link rel="stylesheet" href="styles/default.css">
  13. <script src="highlight.pack.js"></script>
  14. <script>hljs.initHighlightingOnLoad();</script>
  15. ```
  16. Весь код на странице, обрамлённый в теги `<pre><code> .. </code></pre>`
  17. будет автоматически подсвечен. Если вы используете другие теги или хотите
  18. подсвечивать блоки кода динамически, читайте "Инициализацию вручную" ниже.
  19. - Вы можете скачать собственную версию "highlight.pack.js" или сослаться
  20. на захостенный файл, как описано на странице загрузки:
  21. <http://highlightjs.org/download/>
  22. - Стилевые темы можно найти в загруженном архиве или также использовать
  23. захостенные. Чтобы сделать собственный стиль для своего сайта, вам
  24. будет полезен [CSS classes reference][cr], который тоже есть в архиве.
  25. [cr]: http://highlightjs.readthedocs.org/en/latest/css-classes-reference.html
  26. ## node.js
  27. Highlight.js можно использовать в node.js. Библиотеку со всеми возможными языками можно
  28. установить с NPM:
  29. npm install highlight.js
  30. Также её можно собрать из исходников с только теми языками, которые нужны:
  31. python3 tools/build.py -tnode lang1 lang2 ..
  32. Использование библиотеки:
  33. ```javascript
  34. var hljs = require('highlight.js');
  35. // Если вы знаете язык
  36. hljs.highlight(lang, code).value;
  37. // Автоопределение языка
  38. hljs.highlightAuto(code).value;
  39. ```
  40. ## AMD
  41. Highlight.js можно использовать с загрузчиком AMD-модулей. Для этого его
  42. нужно собрать из исходников следующей командой:
  43. ```bash
  44. $ python3 tools/build.py -tamd lang1 lang2 ..
  45. ```
  46. Она создаст файл `build/highlight.pack.js`, который является загружаемым
  47. AMD-модулем и содержит все выбранные при сборке языки. Используется он так:
  48. ```javascript
  49. require(["highlight.js/build/highlight.pack"], function(hljs){
  50. // Если вы знаете язык
  51. hljs.highlight(lang, code).value;
  52. // Автоопределение языка
  53. hljs.highlightAuto(code).value;
  54. });
  55. ```
  56. ## Замена TABов
  57. Также вы можете заменить символы TAB ('\x09'), используемые для отступов, на
  58. фиксированное количество пробелов или на отдельный `<span>`, чтобы задать ему
  59. какой-нибудь специальный стиль:
  60. ```html
  61. <script type="text/javascript">
  62. hljs.configure({tabReplace: ' '}); // 4 spaces
  63. // ... or
  64. hljs.configure({tabReplace: '<span class="indent">\t</span>'});
  65. hljs.initHighlightingOnLoad();
  66. </script>
  67. ```
  68. ## Инициализация вручную
  69. Если вы используете другие теги для блоков кода, вы можете инициализировать их
  70. явно с помощью функции `highlightBlock(code)`. Она принимает DOM-элемент с
  71. текстом расцвечиваемого кода и опционально - строчку для замены символов TAB.
  72. Например с использованием jQuery код инициализации может выглядеть так:
  73. ```javascript
  74. $(document).ready(function() {
  75. $('pre code').each(function(i, e) {hljs.highlightBlock(e)});
  76. });
  77. ```
  78. `highlightBlock` можно также использовать, чтобы подсветить блоки кода,
  79. добавленные на страницу динамически. Только убедитесь, что вы не делаете этого
  80. повторно для уже раскрашенных блоков.
  81. Если ваш блок кода использует `<br>` вместо переводов строки (т.е. если это не
  82. `<pre>`), включите опцию `useBR`:
  83. ```javascript
  84. hljs.configure({useBR: true});
  85. $('div.code').each(function(i, e) {hljs.highlightBlock(e)});
  86. ```
  87. ## Эвристика
  88. Определение языка, на котором написан фрагмент, делается с помощью
  89. довольно простой эвристики: программа пытается расцветить фрагмент всеми
  90. языками подряд, и для каждого языка считает количество подошедших
  91. синтаксически конструкций и ключевых слов. Для какого языка нашлось больше,
  92. тот и выбирается.
  93. Это означает, что в коротких фрагментах высока вероятность ошибки, что
  94. периодически и случается. Чтобы указать язык фрагмента явно, надо написать
  95. его название в виде класса к элементу `<code>`:
  96. ```html
  97. <pre><code class="html">...</code></pre>
  98. ```
  99. Можно использовать рекомендованные в HTML5 названия классов:
  100. "language-html", "language-php". Также можно назначать классы на элемент
  101. `<pre>`.
  102. Чтобы запретить расцветку фрагмента вообще, используется класс "no-highlight":
  103. ```html
  104. <pre><code class="no-highlight">...</code></pre>
  105. ```
  106. ## Экспорт
  107. В файле export.html находится небольшая программка, которая показывает и дает
  108. скопировать непосредственно HTML-код подсветки для любого заданного фрагмента кода.
  109. Это может понадобится например на сайте, на котором нельзя подключить сам скрипт
  110. highlight.js.
  111. ## Координаты
  112. - Версия: 8.0
  113. - URL: http://highlightjs.org/
  114. Лицензионное соглашение читайте в файле LICENSE.
  115. Список авторов и соавторов читайте в файле AUTHORS.ru.txt