Замечательный модуль сообщества

Highlight.js

Статус сборки

Highlight.js - это средство выделения синтаксиса, написанное на JavaScript. Оно работает как в браузере, так и на сервере. Он работает практически с любой разметкой, не зависит от какой-либо структуры и имеет автоматическое определение языка.

Начиная

Минимум для использования highlight.js на веб-странице - это initHighlightingOnLoad на библиотеку вместе с одним из стилей и вызов initHighlightingOnLoad :

1 2 3
<link rel="stylesheet" href="/path/to/styles/default.css"> <script src="/path/to/highlight.pack.js"></script> <script>hljs.initHighlightingOnLoad();</script>

Это позволит найти и выделить код внутри тегов <pre><code> ; он попытается определить язык автоматически. Если автоматическое определение не работает для вас, вы можете указать язык в атрибуте class :

1
<pre><code class="html">...</code></pre>

Список поддерживаемых языковых классов доступен в справочнике по классам. Классы также могут иметь префикс language- или lang- .

Чтобы полностью отключить выделение nohighlight используйте класс nohighlight :

1
<pre><code class="nohighlight">...</code></pre>

Пользовательская инициализация

Если вам нужно немного больше контроля над инициализацией highlight.js, вы можете использовать функции highlightBlock и configure . Это позволяет вам контролировать, что и когда выделять.

Вот эквивалентный способ вызова initHighlightingOnLoad с использованием jQuery:

1 2 3 4 5
$(document).ready(function() { $('pre code').each(function(i, block) { hljs.highlightBlock(block); }); });

Вы можете использовать любые теги вместо <pre><code> для разметки вашего кода. Если вы не используете контейнер, сохраняющий разрывы строк, вам необходимо настроить highlight.js для использования тега <br> :

1 2 3 4 5
hljs.configure({useBR: true}); $('div.code').each(function(i, block) { hljs.highlightBlock(block); });

Для других параметров обратитесь к документации по configure .

Веб-воркеры

Вы можете запустить выделение внутри веб-воркера, чтобы избежать зависания окна браузера при работе с очень большими фрагментами кода.

В вашем основном скрипте:

1 2 3 4 5 6
addEventListener('load', function() { var code = document.querySelector('#code'); var worker = new Worker('worker.js'); worker.onmessage = function(event) { code.innerHTML = event.data; } worker.postMessage(code.textContent); })

В worker.js:

1 2 3 4 5
onmessage = function(event) { importScripts('<path>/highlight.pack.js'); var result = self.hljs.highlightAuto(event.data); postMessage(result.value); }

Получение библиотеки

Вы можете получить highlight.js как размещенный или настраиваемый скрипт браузера или как серверный модуль. Прямо из коробки скрипт браузера поддерживает как AMD, так и CommonJS, поэтому при желании вы можете использовать RequireJS или Browserify без необходимости сборка из исходных текстов. Серверный модуль также отлично работает с Browserify, но есть возможность использовать сборки , специфичные для браузеров , а не что - то означали для сервера. Зайдет на страницу загрузки для всех вариантов.

Не связывайтесь напрямую с GitHub. Библиотека не должна работать прямо из источника, она требует сборки. Если ни один из заранее подготовленных параметров не работает, обратитесь к документации по сборке .

Пакет, размещенный в CDN, не содержит всех языков. В противном случае он был бы слишком большим. Если вы не видите нужный язык в разделе «Общие» , его можно добавить вручную:

1
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.4.0/languages/go.min.js"></script>

В Almond. Чтобы дать модулю имя, нужно использовать оптимизатор. Например:

1
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js

Лицензия

Highlight.js выпускается под BSD лицензией. См ЛИЦЕНЗИИ файл для деталей.

Официальный сайт библиотеки https://highlightjs.org/ .

Дополнительная подробная документация по API и другим темам находится на http://highlightjs.readthedocs.io/ .

Авторы и участники перечислены в файле AUTHORS.en.txt .