入门
在网页上使用 highlight.js 的最基本要求就是引用库文件以及其中一种样式并调用
hljs.initHighlightingOnLoad();引用
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/default.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/vs.min.css">
// 更多样式访问 https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/styles/
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@9.18.1/build/highlight.min.js"></script>
// 或
<script src="https://cdn.jsdelivr.net/gh/tianlunvip/vendor@master/highlightjs/highlight.pack.js"></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 的初始化进行更多控制时，可以使用 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(options)
- tabReplace：用于替换缩进中的TAB字符的字符串。
- useBR：用于
<br>在输出中生成标签而不是换行符的标志，当使用非<pre>容器标记代码时很有用。 - classPrefix：在生成的标记中的类名称之前添加的字符串前缀，用于与样式表向后兼容。
- languages：语言名称和别名的数组，将自动检测限制为仅这些语言。
- languageDetectRe：用于配置CSS类名称如何映射到语言的正则表达式（允许使用诸如color-as-php与默认语言language-php之类的类名称）
- noHighlightRe：一个正则表达式，用于配置要完全跳过哪些CSS类
接受一个代表带有更新值的选项的对象。其他选项不变
hljs.configure({
tabReplace: ' ', // 4 spaces
classPrefix: '' // don't append class prefix
// … other options aren't changed
})
hljs.initHighlighting();
