在网页使用过程中，经常会用到代码的展示。而不同颜色的代码，可以让代码看起来更直观，也更美观.。

找了几个不同的插件，觉得highlight的插件比较实用，而且用起来炒鸡简单。

首先，我们先下载一个 highlight的js 文件。连接 https://highlightjs.org/ 点击 get version 按钮进入语言选择。

勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。通常 common 就足够用了。

然后点击下面的 download 按钮，下载，解压，里面会有 js 文件和 css 文件。

js 文件决定你的代码哪些部分会变高亮，css 文件决定你的代码会变成什么颜色~

在解压后的文件里找到一个 highlight.pack.js 文件，在使用时导入这个  js  文件。

打开里面的 styles 文件，里面有很多的 css 文件。这些文件可以更改你的展示代码的 css 样式，包括高亮的颜色和背景色(主题色)。

在使用时想使用那种样式只需要导入这个样式的 css 文件即可。看不懂这些英文都代表的什么样式？这个网址有各个css文件的效果展示：https://highlightjs.org/static/demo 这里我选择了一个 dark.css 文件：

<link rel="stylesheet" href="/highlight/a11y-dark.min.css">

<script src="/highlight/highlight.min.js"></script>

导入 js 文件和 css 文件后，在底部 script 标签中写入下面代码即可实现当前页面所有 <pre><code></code></pre> 标签中的元素高亮。

在使用时，一定要将你要展示的代码包在 <pre><code></code></pre> 标签里！！！

document.addEventListener('DOMContentLoaded', (event) => {
  document.querySelectorAll('pre code').forEach((el) => {
       hljs.highlightElement(el); 
   }); 
});

原则上系统会自动检测你的代码的内容，不过如果你不放心的话，可以在<code>标签中用代码用到的语言起一个class名，如：

如果你的代码里包含标签，记得将标签的"<"换成"&lt"，把">"换成"&gt"喔~