如果你想在网页上展示一些代码，你可能会遇到一个问题：代码看起来很单调，没有任何颜色或格式，这样的代码不仅不美观，也不利于阅读和理解。
那么，有没有什么办法可以让代码变得更漂亮呢？答案是有的，而且很简单。
你只需要使用一个叫做 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 的自定义样式呢，在代码区域设置的时候也是这样设置的，当然类样式的名字呢，基本上都是标准的格式。
好了，这个库分享介绍给你了，库的原理也为你做了简单的科普，希望对你有所帮助。
如果你有什么问题或建议，请在评论区留言，如果你觉得这篇文章有用，请点赞收藏或分享给你的朋友！
