Awesome 社区模块

Highlight.js

Build Status

Highlight.js is a syntax highlighter written in JavaScript. It works in the browser as well as on the server. It works with pretty much any markup, doesn’t depend on any framework and has automatic language detection.

Getting Started

The bare minimum for using highlight.js on a web page is linking to the library along with one of the styles and calling 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>

This will find and highlight code inside of <pre><code> tags; it tries to detect the language automatically. If automatic detection doesn’t work for you, you can specify the language in the class attribute:

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

The list of supported language classes is available in the class reference. Classes can also be prefixed with either language- or lang-.

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