HighlightJS 自动高亮 pre, code . 语法

我在 WordPress 中使用过很多语法高亮插件。然而，这些插件并不满意。尤其是这个功能 自动的 语法突出显示，而不必编辑每篇文章来创建“块突出显示”或添加 attr 属性（例如类）。

过了一段时间，我找到了HighlightJS。

关于HighlightJS

这是一个用 JavaScript 编写的语法高亮工具，支持 180 多种语言。它不依赖于任何其他框架，并且具有自动语言检测功能。

下面是使用Highlight.JS 之前和之后的示例html 文件。

基本用法

自动打码

要使用它，您需要在网站中嵌入 2 个 js 和 css 文件，HighlightJS 才能工作。代码 hljs.highlightAll() 默认情况下，它会自动查找并突出显示标签内的代码 <pre> <code>.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/default.min.css">
<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

手动打码

如果你想指定你想要的特定语言，你可以使用该属性 class标签为“语言-xxx” <pre>, <code> 那里。

<code class="language-php">...</code>
<pre class="language-css"><code>...</code></pre>

忽略代码块标记

要完全跳过标记代码块，请使用 class="nohighlight".

<code class="nohighlight">...</code>
<pre class="nohighlight"><code>...</code></pre>

高级用法

据开发人员介绍，默认情况下它仅检测语言和颜色，并且没有行号或复制按钮等选项。

不过，我们仍然可以做到这一点，这要归功于 github 上的开发人员开发了更多功能。

编号行号

要添加编号，您需要嵌入其他文件 高亮js-行号.js

<script src="https://cdn.jsdelivr.net/npm/highlightjs-line-numbers.js@latest/dist/highlightjs-line-numbers.min.js"></script>

然后调用该函数 hljs.initLineNumbersOnLoad() 就在后面 hljs.highlightAll()

<script>
  hljs.highlightAll();
  hljs.initLineNumbersOnLoad();
</script>

代码复制按钮

我刚刚在以下位置找到了这个扩展 高亮js复制。您可以参考更多内容，根据自己的意愿进行定制。

与行号一样，您需要嵌入 JS 和 CSS 文件来自定义复制按钮。

<script src="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/highlightjs-copy/dist/highlightjs-copy.min.css" />

与行号不同，您应该设置函数 hljs.addPlugin(new CopyButtonPlugin()) 前 hljs.highlightAll()

<script>
  hljs.addPlugin(new CopyButtonPlugin());
  hljs.initLineNumbersOnLoad();
</script>

自定义 js 和 css 文件

您可以加载 js、css 文件并将它们保存在您的网站内部。它还具有一个语言选项，供用户创建单独的 JS 文件。

CSS 也是如此。您可以根据自己的喜好选择语法主题： 样式 Github.

参考来源： 高亮js.org