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

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>

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

Чтобы nohighlight отключить подсветку 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 .