highlight.js：优雅的代码语法高亮工具

MDJNH • 2025-04-23 18:08 • 编程

一、基本介绍

highlight.js是一款用Javascript编写的代码语法高亮工具。使用它可以为你的页面提供优雅的代码呈现，高亮展示出不同编程语言的关键字、注释、变量等内容。目前，highlight.js支持超过185种编程语言的代码高亮，同时提供了多种配色方案供你选择。

以下是一个基本的highlight.js使用实例：

//引入highlight.js
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>

//使用highlight.js对代码进行高亮
<script>
  hljs.highlightAll();
</script>

//需要高亮的代码段
<pre><code class="html">
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&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>

上述代码片段中，我们引入了highlight.js的样式与Javascript文件，并在需要进行高亮的代码段中使用了pre和code标签，并使用highlight.js的核心方法highlightAll()对代码进行高亮。代码高亮后的效果如下图所示：

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

二、主要特性

除了基本的代码高亮外，highlight.js还拥有许多其他特性，包括：

1、自动检测语言

在使用highlight.js时，你无需手动指定代码使用的编程语言，highlight.js会自动检测语言类型并进行相应的高亮展示。

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

<pre><code>
  const greeting = "Hello, World!";
  console.log(greeting);
</code></pre>

上述代码片段中，我们没有明确指定代码段中使用的编程语言，但highlight.js会自动检测其为Javascript，并进行高亮展示。即使代码段中混有其他语言的关键字或变量，highlight.js也能正常识别并高亮。

2、代码行号

有时候我们需要为代码段添加行号，highlight.js也提供了这样的功能。

<pre class="hljs linenums"><code>
  const greeting = "Hello, World!";
  console.log(greeting);
</code></pre>

代码段中的class属性值hljs linenums指定了此处需要添加行号。效果如下：

 1 const greeting = "Hello, World!";
 2 console.log(greeting);

3、自定义样式

除了默认的样式外，highlight.js还允许你自定义样式，以更好地适应你的网站设计。

//自定义highlight.js的样式
<link rel="stylesheet" href="styles/myStyle.css">

注意：上述代码中href属性值应为你的自定义样式表的路径。

三、常见问题

1、对于某种编程语言的支持不完备

虽然highlight.js已经支持了许多编程语言，但仍有可能遇到某种编程语言的高亮展示不完整的情况。在这种情况下，你可以自己编写该语言的语法规则，并加入highlight.js的规则库中。

2、无法高亮展示某些语言特有的语法

对于某些特殊的语言特有的语法，highlight.js可能无法正确高亮展示。在这种情况下，你可以使用自定义插件或者fork highlight.js并自行修改实现的方式，以满足自己的需求。

四、小结

通过本文我们了解了highlight.js的基本介绍、主要特性以及常见问题，同时也学会了如何在网页中使用highlight.js进行代码高亮展示，相信这对于各类网站或应用程序的开发都有很大的帮助。

原创文章，作者：MDJNH，如若转载，请注明出处：https://www.506064.com/n/371651.html