入门
在网页上使用 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();