Highlight.js Web语法突出显示插件

入门

在网页上使用highlight.js的最基本要求是链接到库以及其中一种样式并调用highlightAll：

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

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

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

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

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

纯文本和禁用突出显示

要设置任意文本的样式，例如代码，但不突出显示，请使用 plaintext类：

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

要完全禁用标签的突出显示，请使用以下nohighlight类：

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

支持的语言

Highlight.js在核心库中支持超过180种不同的语言。也有第三方语言插件可用于其他语言。您可以在SUPPORTED_LANGUAGES.md中找到支持的语言的完整列表。

自定义方案

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

这等效于highlightAll仅使用普通JS进行调用：

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

请参考文档中的configure选项。

将自定义HTML元素用于代码块

我们强烈建议<pre><code>包装代码块。它非常具有语义，并且在零摆弄的情况下“开箱即用”。可以使用其他HTML元素（或组合），但是您可能需要特别注意保留换行符。

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

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

要手动突出显示此类块：

// first, find all the div.code blocks
document.querySelectorAll('div.code').forEach(block => {
  // then highlight each
  hljs.highlightBlock(block);
});

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

要在divCSS中保留换行符，请执行以下操作：

div.code {
  white-space: pre;
}

与Vue.js一起使用

只需在Vue中注册插件：

Vue.use(hljs.vuePlugin);

然后，您将获得一个highlightjs可在模板中使用的组件：

<div id="app">
    <!-- bind to a data property named `code` -->
    <highlightjs autodetect :code="code" />
    <!-- or literal code works as well -->
    <highlightjs language='javascript' code="var x = 5;" />
  </div>

网络工作者

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

在您的主脚本中：

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);
};

Node.js

您可以在节点上使用highlight.js突出显示内容，然后再将其发送到浏览器。确保使用该.value属性获取格式化的html。有关返回的对象的更多信息，请参考api docs。

// require the highlight.js library, including all languages
const hljs = require('./highlight.js');
const highlightedCode = hljs.highlightAuto('<span>Hello World!</span>').value

或者占用较小的空间...仅加载您需要的语言。

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

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

ES6模块

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

在您的应用程序中：

import hljs from 'highlight.js';

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

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

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

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

获取图书馆

您可以将Highlight.js作为托管或自定义构建的浏览器脚本或作为服务器模块来获取。即开即用的浏览器脚本同时支持AMD和CommonJS，因此，如果您希望可以使用RequireJS或Browserify，而无需从源代码进行构建。服务器模块也可以与Browserify完美配合，但是可以选择使用特定于浏览器的版本，而不是用于服务器的版本。

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

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

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

CDN托管

几种流行的CDN托管了Highlightlight.js的预构建版本，该版本捆绑了许多常用语言。通过CDN使用Highlight.js时，可以使用Subresource Integrity来提高安全性。有关详细信息，请参见DIGESTS.md。

cdnjs（链接）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/languages/go.min.js"></script>

jsdelivr（链接）

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.7.2/build/languages/go.min.js"></script>

unpkg（链接）

<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@10.7.2/styles/default.min.css">
<script src="https://unpkg.com/@highlightjs/cdn-assets@10.7.2/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://unpkg.com/@highlightjs/cdn-assets@10.7.2/languages/go.min.js"></script>

注意： CDN托管的highlight.min.js软件包不会捆绑所有语言。会很大。您可以在下载页面上找到默认情况下捆绑的“常见”语言列表。

自托管

该下载页面可以快速生成仅包括您所需要的语言定制的捆绑。

或者，您可以从源代码构建浏览器程序包：

node tools/build.js -t browser :common

有关更多信息，请参见我们的建筑文档。

注意：从源代码构建应始终导致最小的构建。网站下载页面针对速度而非大小进行了优化。

预建CDN资产

您还可以下载并通过我们自己的CDN自托管我们提供的相同资产。我们将这些构建发布到cdn-release GitHub存储库中。您可以使用等轻松地将单个文件从CDN端点中拉出curl。如果说您只需要highlight.min.js一个CSS文件。

还有一个npm包@ highlightjs / cdn-assets，如果通过via提取资产，npm或者yarn对于您的构建过程来说更容易。

NPM / Node.js服务器模块

Highlight.js也可以在服务器上使用。可以从NPM或Yarn安装具有所有受支持语言的软件包：

npm install highlight.js
# or
yarn add highlight.js

或者，您可以从源代码构建它：

node tools/build.js -t node

有关更多信息，请参见我们的建筑文档。

来源

当前源始终在GitHub上可用。

执照

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

链接

该库的官方站点位于https://highlightjs.org/。

有关API和其他主题的更多深入文档，请 参见http://highlightjs.readthedocs.io/。

核心团队和贡献者的列表可以在CONTRIBUTORS.md文件中找到。