Highlight.js

Highlight.js是一个用JavaScript编写的语法高亮器。它可以在浏览器和服务器上运行。它几乎可以处理任何标记，不依赖于任何其他框架，并且具有自动语言检测功能。

目录

• 基本用法
• 在浏览器中使用
• 纯文本代码块
• 忽略代码块
• 在服务器上使用Node.js
• 支持的语言
• 自定义用法
• 使用自定义HTML
• 与Vue.js一起使用
• 使用Web Workers
• 导入库
• Node.js / require
• ES6模块 / import
• 获取库
• 通过CDN获取
• cdnjs (链接)
• jsdelivr (链接)
• unpkg (链接)
• 下载预构建的CDN资源
• 从我们的网站下载
• 通过NPM包安装
• 从源代码构建
• 要求
• 许可证
• 链接

---

升级到版本11

与往常一样，主要版本确实包含可能需要用户采取行动的重大更改。请阅读VERSION_11_UPGRADE.md以获取重大更改的详细摘要以及您可能需要采取的任何措施。

对旧版本的支持

请参阅SECURITY.md以获取长期支持信息。

---

基本用法

在浏览器中使用

在网页上使用highlight.js的最简单方法是链接到库和其中一个主题，然后调用[highlightAll][1]：

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

这将查找并高亮显示<pre><code>标签内的代码；它会尝试自动检测语言。如果自动检测对您不起作用，或者您只是更喜欢明确指定，可以使用class属性手动指定语言：

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

纯文本代码块

要将Highlight.js的样式应用于纯文本而不实际高亮显示它，请使用plaintext语言：

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

忽略代码块

要完全跳过对代码块的高亮显示，请使用nohighlight类：

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

在服务器上使用Node.js

自动检测语言并高亮显示一些代码的最简单方法。

// 加载库和所有语言
hljs = require('highlight.js');
html = hljs.highlightAuto('<h1>Hello World!</h1>').value

要只加载"常见"子集的流行语言：

hljs = require('highlight.js/lib/common');

要用特定语言高亮显示代码，请使用highlight：

html = hljs.highlight('<h1>Hello World!</h1>', {language: 'xml'}).value

有关require与import用法等的更多示例，请参阅导入库。有关highlight或highlightAuto返回的结果对象的更多信息，请参阅API文档。

支持的语言

Highlight.js在核心库中支持超过180种语言。还有第三方语言定义可用于支持更多语言。您可以在[SUPPORTED_LANGUAGES.md][9]中找到支持的语言的完整列表。

自定义用法

如果您需要对Highlight.js的初始化进行更多控制，可以使用[highlightElement][3]和[configure][4]函数。这允许您更好地控制要高亮显示的内容和何时高亮显示。

例如，这里是手动执行等同于调用[highlightAll][1]的粗略等效代码：

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

请参阅[configure][4]选项的文档。

使用自定义HTML

我们强烈建议使用<pre><code>包装代码块。这在语义上很合理，并且"开箱即用"，无需任何调整。可以使用其他HTML元素（或组合），但您可能需要特别注意保留换行符。

假设您的代码块标记使用div：

<div class='code'>...</div>

要手动高亮显示此类块：

// 首先，找到所有的div.code块
document.querySelectorAll('div.code').forEach(el => {
  // 然后高亮显示每个
  hljs.highlightElement(el);
});

如果不使用保留换行符的标签（如pre），您需要一些额外的CSS来帮助保留它们。您也可以使用插件预处理和后处理换行符，但我们建议使用CSS。

要使用CSS在div内保留换行符：

div.code {
  white-space: pre;
}

与Vue.js一起使用

请参阅highlightjs/vue-plugin以获取一个简单的Vue插件，它可以很好地与Highlight.js配合使用。

vue-plugin使用示例：

<div id="app">
  <!-- 绑定到名为`code`的数据属性 -->
  <highlightjs autodetect :code="code" />
  <!-- 或者文字代码也可以 -->
  <highlightjs language='javascript' code="var x = 5;" />
</div>

使用Web Workers

您可以在Web Worker中运行高亮显示，以避免在处理非常大的代码块时冻结浏览器窗口。

在主脚本中：

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.min.js');
  const result = self.hljs.highlightAuto(event.data);
  postMessage(result.value);
};

导入库

首先，您可能会通过npm或yarn安装库 - 请参阅获取库。

Node.js / require

引入顶级库将加载所有语言：

// 引入highlight.js库，包括所有语言
const hljs = require('./highlight.js');
const highlightedCode = hljs.highlightAuto('<span>Hello World!</span>').value

为了减少占用空间，加载我们的常用语言子集（与我们默认的Web构建使用的集合相同）：

const hljs = require('highlight.js/lib/common');

要获得最小的占用空间，只加载您需要的语言：

const hljs = require('highlight.js/lib/core');
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));

const highlightedCode = hljs.highlight('<span>Hello World!</span>', {language: 'xml'}).value

ES6模块 / import

注意：您也可以直接从完全静态的URL导入，例如我们自己预构建的ES6模块CDN资源。有关具体示例，请参阅通过CDN获取。

默认导入将注册所有语言：

import hljs from 'highlight.js';

只导入库并注册您需要的语言更有效：

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

如果您的构建工具处理CSS导入，您也可以直接将主题作为模块导入：

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

获取库

您可以获取highlight.js作为托管的或自定义构建的浏览器脚本或服务器模块。开箱即用，浏览器脚本同时支持AMD和CommonJS，因此如果您愿意，可以使用RequireJS或Browserify而无需从源代码构建。服务器模块也可以完美地与Browserify配合使用，但还有一个选项可以使用专门针对浏览器而不是服务器的构建。

**不要直接链接到GitHub。**该库不应直接从源代码运行，它需要构建。如果预打包的选项都不适合您，请参阅[构建文档][6]。

**关于Almond。**您需要使用优化器为模块指定名称。例如：

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

通过CDN获取

Highlight.js的预构建版本（捆绑了许多常见语言）由几个流行的CDN托管。 通过CDN使用Highlight.js时，您可以使用子资源完整性来增加安全性。有关详细信息，请参阅DIGESTS.md。

cdnjs (链接)

常见JS

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/highlight.min.js"></script>
<!-- 还可以轻松单独加载其他语言 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/languages/go.min.js"></script>

ES6模块

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.10.0/styles/dark.min.css">
<script type="module">
import hljs from