Highlight.js 代码高亮插件的使用详解

什么是 highlight.js

highlight.js 是一个用于 Web 页面的 JavaScript 代码高亮库。它支持超过 180 种编程语言和文档格式的语法高亮。

如何使用 highlight.js

安装

你可以通过 NPM 安装 highlight.js：

npm install highlight.js

或者你也可以在官网下载 highlight.js 的压缩包，然后将 highlight.min.js 和 highlight.min.css 文件添加到你的项目中。

引入

<!-- 加载 highlight.js 的 CSS 文件 -->
<link rel="stylesheet" href="/path/to/highlight.min.css">

<!-- 加载 highlight.js 的 JavaScript 文件 -->
<script src="/path/to/highlight.min.js"></script>

高亮代码

方式一：自动检测语言并高亮

你可以通过下面的代码来自动检测代码的语言并高亮：

<pre><code>
// Your code here
</code></pre>

<script>
// 在页面加载完成之后，对所有 pre code 进行高亮
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el);
  });
});
</script>

方式二：指定语言类型并高亮

你也可以通过下面的代码来指定代码的语言类型并进行高亮：

<pre><code class="html">
// Your code here
</code></pre>

<script>
// 在页面加载完成之后，对所有 pre code 进行高亮
document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((el) => {
    hljs.highlightElement(el);
  });
});
</script>

上面的 class="html" 即指定了代码的类型为 HTML。

示例说明

示例一：高亮 HTML 代码

下面是一个简单的 HTML 页面示例，演示如何高亮 HTML 代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Highlight.js 示例一：高亮 HTML 代码</title>
  <link rel="stylesheet" href="./node_modules/highlight.js/styles/atom-one-dark.min.css">
</head>
<body>
  <pre><code class="html">
    &lt;!DOCTYPE html&gt;
    &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Hello World&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;Hello World!&lt;/h1&gt;
    &lt;/body&gt;
    &lt;/html&gt;
  </code></pre>

  <script src="./node_modules/highlight.js/lib/highlight.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

上面的代码通过指定 class="html" 来高亮 HTML 代码。在 script 标签的最后，使用 hljs.initHighlightingOnLoad() 使高亮库能够自动检测语言并高亮所有代码块。

示例二：高亮 JavaScript 代码

下面是一个简单的 JavaScript 页面示例，演示如何高亮 JavaScript 代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Highlight.js 示例二：高亮 JavaScript 代码</title>
  <link rel="stylesheet" href="./node_modules/highlight.js/styles/vs2015.min.css">
</head>
<body>
  <pre><code class="javascript">
    function helloWorld() {
      console.log('Hello, World!');
    }
    helloWorld();
  </code></pre>

  <script src="./node_modules/highlight.js/lib/highlight.js"></script>
  <script>hljs.initHighlightingOnLoad();</script>
</body>
</html>

上面的代码通过指定 class="javascript" 来高亮 JavaScript 代码。在 script 标签的最后，使用 hljs.initHighlightingOnLoad() 使高亮库能够自动检测语言并高亮所有代码块。

总结

以上就是 highlight.js 代码高亮插件的使用详解。通过正确地使用 highlight.js，我们可以很容易地在我们的网站或博客中显示高亮的代码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：highlight.js 代码高亮插件的使用详解 - Python技术站

highlight.js 代码高亮插件的使用详解