你的代码着色好看吗？来这里看看吧！

如果你想在网页上展示一些代码，你可能会遇到一个问题：代码看起来很单调，没有任何颜色或格式，这样的代码不仅不美观，也不利于阅读和理解。

那么，有没有什么办法可以让代码变得更漂亮呢？答案是有的，而且很简单。

你只需要使用一个叫做 highlight.js 的第三方库，就可以轻松实现代码着色的效果。

highlight.js 是一个非常强大和流行的库，它可以自动识别和着色超过 190 种编程语言。

它支持多种主题和样式，让你可以根据自己的喜好选择合适的配色方案。

在本文中，子辰将向你介绍如何使用 highlight.js 来为你的代码着色，以及它的基本原理和优势。

让我们开始吧！

如何使用 highlight.js

使用 highlight.js 的方法有两种：一种是通过 npm 下载并安装到你的项目中，另一种是通过 CDN 引入到你的网页中。

这里我们以 CDN 的方式为例，如果你想使用 npm 的方式，可以参考文档。

首先，我们需要在网页中引入 highlight.js 的 JS 文件和 CSS 文件。

JS 文件是主要文件，负责识别和着色代码，CSS 文件是样式文件，负责定义代码的颜色和格式。

我们可以从 CDN 中选择一个合适的 JS 文件和 CSS 文件。

highlight.js 提供了多个 CDN 服务商，你可以根据自己的需求选择一个，这里我们以 jsDelivr 为例。

JS 文件的链接如下：

<script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/highlight.min.js"></script>

CSS 文件的链接则需要根据你想要的主题来选择。

highlight.js 提供了很多主题，你可以在官网上预览每个主题的效果，并找到对应的 CSS 文件名，这里我们以 github-dark 为例。

CSS 文件的链接如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release/build/styles/github-dark.min.css">

将上面两个链接分别放到网页的 head 标签中，就完成了引入 highlight.js 的步骤。

接下来，我们需要在网页中写一些代码，并用 pre 标签和 code 标签包裹起来。

pre 标签用于保留代码的格式，code 标签用于标识代码内容。例如：

<pre>
  <code id="code-area">
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  body {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    height: 100vh;
    width: 100vw;
  }
  </code>
</pre>

注意，我们给 code 标签添加了一个 id 属性，方便后面通过 JS 获取它。

最后，我们需要在网页中添加一些 JS 代码，来调用 highlight.js 的方法，实现代码着色的功能。

highlight.js 提供了两个主要的方法：highlightElement 和 highlight。

这两个方法都可以实现代码着色的效果，但是适用于不同的场景。

highlightElement

highlightElement 方法适用于当你的代码是直接写在网页中的情况。

这个方法接受一个元素作为参数，并将该元素内部的文本内容进行着色处理。例如：

// 获取 code 元素
const codeEle = document.getElementById("code-area");
// 调用 highlightElement 方法，传入 code 元素
hljs.highlightElement(codeEle);

如果一切顺利，你应该能看到类似下图的效果：

代码已经被着色了，并且你可以看到代码被替换成了一个个标签，标签被加上了样式。

在最后的原理里我们在详细的说一下。

highlight

highlight 方法适用于当你的代码是通过 Ajax 请求获取到的纯文本数据的情况。

这个方法接受一个字符串作为参数，并返回一个对象，包含着色后的文本内容和代码的语言。例如：

<script>
  const codeEle = document.getElementById('code-area')
  // 比如说现在 code 就是 Ajax 返回的数据，lang 就是代码语言，content 就是代码内容
  const code = {
    lang: 'css',
    content: `
    * {
      margin: 0;
      padding: 0;
    }`
  }
  // 我们接下来可以使用 hljs.highlight，将代码内容与代码语言传入进去
  const result = hljs.highlight(code.content, {
    language: code.lang
  })
  // 它会返回一个结果，我们打印到控制台看看
  console.log('result >>> ', result)
</script>

我们可以看到，打印出来的是一个对象，code 是它原始的代码，language 是它的语言，而 value 就是它着色后的代码。

那么现在要做的就是将 value 添加到 code 元素里边去。

<script>
  const code = {
    lang: 'css',
    content: `
    * {
      margin: 0;
      padding: 0;
    }`
  }
  const result = hljs.highlight(code.content, {
    language: code.lang
  })
  const codeEle = document.getElementById('code-area')
  codeEle.innerHTML = result.value
</script>

我们可以看到，代码确实被着色了，但是和之前的有所差别，我们看一下是什么原因。

打开控制后我们发现，用这种方式 code 元素就没有办法被自动加上类样式了，所以说我们就需要手动给 code 加上类样式才可以。

// 通过 className 为 code 手动添加类样式，并添加类的语言
codeEle.className = `hljs language-${code.lang}`

highlight.js 的语言支持

无论使用哪种方法，都需要注意指定代码所属的语言。

如果不指定语言，highlight.js 会尝试自动识别语言，并可能出现错误或不准确的结。

指定语言可以通过两种方式：

• 在 code 标签中添加 class 属性，并设置为 language-xxx 的形式，其中 xxx 是语言名称。
• 在调用 highlightElement 或 highlight 方法时，在第二个参数中传入一个对象，并设置 language 属性为语言名称。

上图是 highlight.js 支持的语言，可以看到有很多种，需要用其他语言的时候，language 设置成指定的语言名称就可以了。

原理

它的原理你可能已经猜到了，在 highlightElement 里我们简单说了一下，现在再看下图：

之所以可以实现着色，其实就是查找和替换的过程，将原来的纯文本替换为元素标签包裹文本，元素是可以加上样式的，而样式就是我们引入的 css 文件。

这就是它的基本原理了。

总结

其实有时候我们去设置 Mackdown 的自定义样式呢，在代码区域设置的时候也是这样设置的，当然类样式的名字呢，基本上都是标准的格式。

好了，这个库分享介绍给你了，库的原理也为你做了简单的科普，希望对你有所帮助。

如果你有什么问题或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！