Npcink Blog
切换菜单

Highlight.js - Javascript 的 Web 语法高亮

它几乎可以与任何标记一起使用，不依赖于任何框架，并且具有自动语言检测功能。

最后更新于
本页目录8 节

Highlight.js 是用 JavaScript 编写的语法突出显示工具。它在浏览器和服务器上均可使用。它几乎可以与任何标记一起使用，不依赖于任何框架，并且具有自动语言检测功能。

页底文件来源于 GitHub，于 2019 年 11 月 19 号下载。

  • 185 种语言和 90 种样式
  • 自动语言检测
  • 多语言代码突出显示
  • 可用于 node.js
  • 适用于任何标记
  • 与任何 js 框架兼容

如何使用？

来源于： https://highlightjs.org/usage/

入门

在网页上使用 Highlight.js 的最低要求是将链接到库以及其中一种样式并调用 initHighlightingOnLoad：

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

这将在<pre><code>标签内找到并突出显示代码；它会尝试自动检测语言。如果自动检测对您不起作用，则可以在class属性中指定语言：

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

支持的语言和相应类的列表。

类也可以使用language-或作为前缀lang-。

要使任意文本看起来像代码，但不突出显示，请使用 plaintext此类：

<pre><code class="plaintext">...</code></pre>

要完全禁用突出显示，请使用nohighlight类：

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

自定义初始化

当需要对 Highlight.js 的初始化进行更多控制时，可以使用highlightBlock和configure 函数。这可以让你控制什么突出和时。

这是initHighlightingOnLoad使用普通 JS 调用的等效方法：

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((block) => {
    hljs.highlightBlock(block);
  });
});

您可以使用任何标签代替<pre><code>标记代码。如果您不使用保留换行符的容器，则需要配置 highlight.js 以使用<br>标记：

hljs.configure({useBR: true});


document.querySelectorAll('div.code').forEach((block) => {
  hljs.highlightBlock(block);
});

有关其他选项，请参阅的文档configure。

网络工作者

您可以在网络工作者中运行突出显示功能，以避免在处理非常大的代码块时冻结浏览器窗口。

在您的主脚本中：

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

您可以在节点上使用 highlight.js 突出显示内容，然后再将其发送到浏览器。确保使用该.value属性获取格式化的 html。有关返回的对象的更多信息，请参考 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 作为托管或自定义构建的浏览器脚本或作为服务器模块来获取。即开即用的浏览器脚本同时支持 AMD 和 CommonJS，因此，如果您希望可以使用 RequireJS 或 Browserify，而无需从源代码进行构建。服务器模块也可以与 Browserify 完美配合，但是可以选择使用特定于浏览器的版本，而不是用于服务器的版本。前往下载页面以获取所有选项。

不要直接链接到 GitHub。该库不应直接从源头工作，它需要构建。如果没有任何预包装的选项对您有效，请参考建筑文档。

CDN 托管的软件包没有所有的语言。否则它将太大。如果您在“通用”部分中没有看到所需的语言，则可以手动添加：

<script
 charset="UTF-8"
 src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.9/languages/go.min.js"></script>

在杏仁上。您需要使用优化器为模块命名。例如：

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

普通 JS

您可以将 Highlight.js 导入为 CommonJS 模块：

npm install highlight.js --save

在您的应用程序中：

import hljs from 'highlight.js';

默认导入会导入所有语言！因此，仅导入所需的库和语言可能会更有效：

import hljs from 'highlight.js/lib/highlight';
import javascript from 'highlight.js/lib/languages/javascript';
hljs.registerLanguage('javascript', javascript);

要设置语法突出显示样式，如果构建工具从 JavaScript 入口点处理 CSS，则可以将样式表直接导入到 CommonJS 模块中：

import hljs from 'highlight.js/lib/highlight';
import 'highlight.js/styles/github.css';

执照

Highlight.js 是在 BSD 许可下发布的。有关详细信息，请参见 LICENSE 文件。