发布：2023/12/7 15:43:34作者：大数据 来源：大数据 浏览次数：286
https://highlightjs.org/
https://github.com/highlightjs/highlight.js
highlight代码高亮
如何使用highlight.js
基本用法
在浏览器中
在网页上使用 highlight.js 的最低要求是链接到库以及主题之一并调用highlightAll：
|
1 2 3 |
<link rel="stylesheet" href="/path/to/styles/default.css"> <script src="/path/to/highlight.min.js"></script> <script>hljs.highlightAll();</script> |
这将找到并突出显示<pre><code>标签内的代码；它会尝试自动检测语言。如果自动检测对您不起作用，或者您只是希望明确表示，您可以在 usingclass属性中手动指定语言：
|
1 |
<pre><code class="language-html">...</code></pre> |
明文代码块
要将 Highlight.js 样式应用于纯文本而不实际突出显示它，请使用以下plaintext语言：
|
1 |
<pre><code class="language-plaintext">...</code></pre> |
忽略代码块
要完全跳过代码块的突出显示，请使用nohighlight该类：
|
1 |
<pre><code class="nohighlight">...</code></pre> |
服务器上的 Node.js
自动检测语言并突出显示一些代码的最低要求。
|
1 2 3 |
// load the library and ALL languages hljs = require('highlight.js'); html = hljs.highlightAuto('<h1>Hello World!</h1>').value |
仅加载流行语言的“通用”子集：
|
1 |
hljs = require('highlight.js/lib/common'); |
要突出显示特定语言的代码，请使用highlight：
|
1 |
html = hljs.highlight('<h1>Hello World!</h1>', {language: 'xml'}).value |
有关vs用法等的更多示例，请参阅导入库。有关返回的结果对象的更多信息或参考api 文档。requireimporthighlighthighlightAuto
支持的语言
Highlight.js 在核心库中支持 180 多种语言。还有 3rd 方语言定义可用于支持更多语言。您可以在SUPPORTED_LANGUAGES.md 中找到支持语言的完整列表。
自定义用法
如果您需要对 Highlight.js 的初始化进行更多控制，可以使用highlightElement和configure 函数。这可以让你更好地控制哪些突出和时。
例如，这里大致相当于调用highlightAll但手动完成工作：
|
1 |
</code>document.addEventListener('DOMContentLoaded', (event) => { document.querySelectorAll('pre code').forEach((el) => { hljs.highlightElement(el); }); }); |
有关configure选项，请参阅文档。
使用自定义 HTML
我们强烈建议<pre><code>对代码块进行包装。它是非常语义化的，并且开箱即用，零摆弄。可以使用其他 HTML 元素（或组合），但您可能需要特别注意保留换行符。
假设您的代码块标记使用 div：
|
1 |
<div class='code'>...</div> |
要手动突出显示此类块：
|
1 |
</code>// first, find all the div.code blocks document.querySelectorAll('div.code').forEach(el => { // then highlight each hljs.highlightElement(el); }); |
如果不使用保留换行符（如pre）的标记，您将需要一些额外的 CSS 来帮助保留它们。您也可以使用插件预处理和后处理换行符，但我们建议使用 CSS。
要div使用 CSS保留换行符：
|
1 2 3 |
div.code { white-space: pre; } |
与 Vue.js 一起使用
请参阅highlightjs/vue-plugin以获取与 Highlight.js 配合使用的简单 Vue 插件。
vue-plugin行动中的一个例子：
|
1 2 3 4 5 6 |
<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> |
使用网络工作者
您可以在 Web Worker 中运行突出显示，以避免在处理非常大的代码块时冻结浏览器窗口。
在您的主脚本中：
|
1 2 3 4 5 6 |
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 中：
|
1 2 3 4 5 |
onmessage = (event) => { importScripts('<path>/highlight.min.js'); const result = self.hljs.highlightAuto(event.data); postMessage(result.value); }; |
导入库
首先，您可能会通过npm或yarn- 请参阅获取库来安装库。
节点.js / require
需要顶级库将加载所有语言：
|
1 2 3 |
// require the highlight.js library, including all languages const hljs = require('./highlight.js'); const highlightedCode = hljs.highlightAuto('<span>Hello World!</span>').value |
对于较小的占用空间，请加载我们的通用语言子集（与我们的默认 Web 构建使用的相同）。
|
1 |
const hljs = require('highlight.js/lib/common'); |
对于最小的占用空间，仅加载您需要的语言：
|
1 2 3 4 |
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
默认导入将注册所有语言：
|
1 |
import hljs from 'highlight.js'; |
仅导入库并注册您需要的语言会更有效：
|
1 2 3 |
import hljs from 'highlight.js/lib/core'; import javascript from 'highlight.js/lib/languages/javascript'; hljs.registerLanguage('javascript', javascript); |
如果您的构建工具处理 CSS 导入，您还可以将主题直接作为模块导入：
|
1 2 |
import hljs from 'highlight.js'; import 'highlight.js/styles/github.css'; |
获取库
您可以将 highlight.js 作为托管或自定义构建的浏览器脚本或作为服务器模块获取。开箱即用的浏览器脚本支持 AMD 和 CommonJS，因此如果您愿意，可以使用 RequireJS 或 Browserify，而无需从源代码构建。服务器模块也可以与 Browserify 完美配合，但可以选择使用特定于浏览器的构建，而不是用于服务器的构建。
不要直接链接到 GitHub。该库不应该直接从源头开始工作，它需要构建。如果没有预先打包的选项适合您，请参阅构建文档。
在杏仁上。您需要使用优化器为模块命名。例如：
|
1 |
r.js -o name=hljs paths.hljs=/path/to/highlight out=highlight.js |
通过 CDN 获取
捆绑了许多常用语言的 Highlight.js 的预构建版本由几个流行的 CDN 托管。通过 CDN 使用 Highlight.js 时，您可以使用子资源完整性来提高安全性。有关详细信息，请参阅DIGESTS.md。
cdnjs (链接)
|
1 2 3 4 |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/default.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/highlight.min.js"></script> <!-- and it's easy to individually load additional languages --> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/languages/go.min.js"></script> |
jsdelivr（链接）
|
1 2 3 4 |
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/styles/default.min.css"> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/highlight.min.js"></script> <!-- and it's easy to individually load additional languages --> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.3.1/build/languages/go.min.js"></script> |
解包（链接）
|
1 2 3 4 |
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/cdn-assets@11.3.1/styles/default.min.css"> <script src="https://unpkg.com/@highlightjs/cdn-assets@11.3.1/highlight.min.js"></script> <!-- and it's easy to individually load additional languages --> <script src="https://unpkg.com/@highlightjs/cdn-assets@11.3.1/languages/go.min.js"></script> |
注意： CDN 托管的highlight.min.js包不会捆绑每种语言。它会非常大。您可以在我们的下载页面上找到我们默认捆绑的“常用”语言列表。
下载预构建的 CDN 资产
您还可以通过我们自己的 CDN 下载和自托管我们提供的相同资产。我们将这些构建发布到cdn-release GitHub 存储库。您可以使用 等轻松地从 CDN 端点中提取单个文件curl；如果说你只需要highlight.min.js一个 CSS 文件。
还有一个 npm 包@highlightjs/cdn-assets如果通过 vianpm或yarn对您的构建过程更容易拉入资产。
从我们的网站下载
该下载页面可以快速生成精缩束只包括你想要的语言定制的单文件。
注意： 从源代码构建可以生成比网站下载稍小的构建。
通过 NPM 包安装
我们的 NPM 包包括所有支持的语言，可以通过 NPM 或 Yarn 安装：
|
1 2 3 |
npm install highlight.js # or yarn add highlight.js |
或者，您可以从源代码构建 NPM 包。
从源代码构建
该电流源代码总是可以在GitHub上。
|
1 2 3 |
node tools/build.js -t node node tools/build.js -t browser :common node tools/build.js -t cdn :common |
有关更多信息，请参阅我们的建筑文档。
要求
Highlight.js 适用于所有现代浏览器和当前支持的 Node.js 版本。您需要以下软件来为核心库做出贡献：
- Node.js >= 12.x
- npm >= 6.x
执照
Highlight.js 是在 BSD 许可下发布的。有关详细信息，请参阅我们的许可证文件。
链接
该库的官方网站是https://highlightjs.org/。
有关 API 和其他主题的进一步深入文档位于 http://highlightjs.readthedocs.io/。
可以在CONTRIBUTORS.md文件中找到核心团队和贡献者的列表。
