highlighter 语法高亮

GitHub 项目地址 网址

入门

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

转载请注明出处：吖Go博客 » highlighter 语法高亮