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 的初始化进行更多控制时,可以使用 highlightBlockconfigure 函数。

这是 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();
赞(3) 打赏
取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

    暂无评论...