Highlight.js是用JavaScript編寫的語法突出顯示工具。它在瀏覽器和服務(wù)器上均可使用。它幾乎可以與任何標(biāo)記一起使用，不依賴于任何框架，并且具有自動(dòng)語言檢測(cè)功能。
本站下載：
頁底文件來源于Github，于2019年11月19號(hào)下載。
- 185種語言和90種樣式
- 自動(dòng)語言檢測(cè)
- 多語言代碼突出顯示
- 可用于node.js
- 適用于任何標(biāo)記
- 與任何js框架兼容
如何使用？
來源于： https://highlightjs.org/usage/
入門
在網(wǎng)頁上使用Highlight.js的最低要求是將鏈接到庫以及其中一種樣式并調(diào)用?initHighlightingOnLoad：
<link rel="stylesheet" href="/path/to/styles/default.css">
<script src="/path/to/highlight.pack.js"></script>
<script>hljs.initHighlightingOnLoad();</script>這將在<pre><code>標(biāo)簽內(nèi)找到并突出顯示代碼；它會(huì)嘗試自動(dòng)檢測(cè)語言。如果自動(dòng)檢測(cè)對(duì)您不起作用，則可以在class屬性中指定語言：
<pre><code class="html">...</code></pre>支持的語言和相應(yīng)類的列表。
類也可以使用language-或作為前綴lang-。
要使任意文本看起來像代碼，但不突出顯示，請(qǐng)使用?plaintext此類：
<pre><code class="plaintext">...</code></pre>要完全禁用突出顯示，請(qǐng)使用nohighlight類：
<pre><code class="nohighlight">...</code></pre>自定義初始化
當(dāng)需要對(duì)Highlight.js的初始化進(jìn)行更多控制時(shí)，可以使用highlightBlock和configure?函數(shù)。這可以讓你控制什么突出和時(shí)。
這是initHighlightingOnLoad使用普通JS?調(diào)用的等效方法：
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('pre code').forEach((block) => {
hljs.highlightBlock(block);
});
});您可以使用任何標(biāo)簽代替<pre><code>標(biāo)記代碼。如果您不使用保留換行符的容器，則需要配置highlight.js以使用<br>標(biāo)記：
hljs.configure({useBR: true});
document.querySelectorAll('div.code').forEach((block) => {
hljs.highlightBlock(block);
});有關(guān)其他選項(xiàng)，請(qǐng)參閱的文檔configure。
網(wǎng)絡(luò)工作者
您可以在網(wǎng)絡(luò)工作者中運(yùn)行突出顯示功能，以避免在處理非常大的代碼塊時(shí)凍結(jié)瀏覽器窗口。
在您的主腳本中：
addEventListener('load', () => {
const code = document.querySelector('#code');
const worker = new Worker('worker.js');
worker.onmessage = (event) => { code.innerHTML = event.data; }
worker.postMessage(code.textContent);
});在worker.js中：
onmessage = (event) => {
importScripts('<path>/highlight.pack.js');
const result = self.hljs.highlightAuto(event.data);
postMessage(result.value);
};Node.js
您可以在節(jié)點(diǎn)上使用highlight.js突出顯示內(nèi)容，然后再將其發(fā)送到瀏覽器。確保使用該.value屬性獲取格式化的html。有關(guān)返回的對(duì)象的更多信息，請(qǐng)參考api docs https://highlightjs.readthedocs.io/en/latest/api.html
// require the highlight.js library including all languages
const hljs = require('./highlight.js');
const highlightedCode = hljs.highlightAuto('<span>Hello World!</span>').value// require the highlight.js library without languages
const hljs = require("highlight.js/lib/highlight.js");
// separately require languages
hljs.registerLanguage('html', require('highlight.js/lib/languages/html'));
hljs.registerLanguage('sql', require('highlight.js/lib/languages/sql'));
// highlight with providing the language
const highlightedCode = hljs.highlight('html', '<span>Hello World!</span>').value獲取圖書館
您可以將Highlight.js作為托管或自定義構(gòu)建的瀏覽器腳本或作為服務(wù)器模塊來獲取。即開即用的瀏覽器腳本同時(shí)支持AMD和CommonJS，因此，如果您希望可以使用RequireJS或Browserify，而無需從源代碼進(jìn)行構(gòu)建。服務(wù)器模塊也可以與Browserify完美配合，但是可以選擇使用特定于瀏覽器的版本，而不是用于服務(wù)器的版本。前往下載頁面以獲取所有選項(xiàng)。
不要直接鏈接到GitHub。該庫不應(yīng)直接從源頭工作，它需要構(gòu)建。如果沒有任何預(yù)包裝的選項(xiàng)對(duì)您有效，請(qǐng)參考建筑文檔。
CDN托管的軟件包沒有所有的語言。否則它將太大。如果您在“通用”部分中沒有看到所需的語言，則可以手動(dòng)添加：
<script
charset="UTF-8"
src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/languages/go.min.js"></script>在杏仁上。您需要使用優(yōu)化器為模塊命名。例如：
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js普通JS
您可以將Highlight.js導(dǎo)入為CommonJS模塊：
npm install highlight.js --save在您的應(yīng)用程序中：
import hljs from 'highlight.js';默認(rèn)導(dǎo)入會(huì)導(dǎo)入所有語言！因此，僅導(dǎo)入所需的庫和語言可能會(huì)更有效：
import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);要設(shè)置語法突出顯示樣式，如果構(gòu)建工具從JavaScript入口點(diǎn)處理CSS，則可以將樣式表直接導(dǎo)入到CommonJS模塊中：
import hljs from 'highlight.js/lib/highlight';
import 'highlight.js/styles/github.css';執(zhí)照
Highlight.js是在BSD許可下發(fā)布的。有關(guān)詳細(xì)信息，請(qǐng)參見LICENSE文件。