本文最后修改于 337 天前，部分内容可能已经过时！

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

比如下面这样的

使用方法：

选择常用的语言

https://highlightjs.org/

点击Get version按钮进入语言选择，勾选你常用的语言，引用JS文件后会自动检测你要展示的代码的语言，并自动让代码高亮，默认勾选common的就够用了，如果你有别的特殊的可往下滑动并勾选响应的语言

下载highlight文件

styles目录下是所有的css样式，决定代码的颜色；highlight.pack.js为库文件，决定代码哪些部分会变高亮

如果不知道选哪种高亮模式可以查看官网提供的demo，然后选择一个自己最喜欢的样式即可，个人比较喜欢黑色背景，所以选择了atom-one-dark.css

如果你不需要用到其他样式切换，可以删除使用的css之外的其他css文件以减少包的大小

使用的页面导入css及js文件

补充一句常识，但常常可能被忽视的：它的加载顺序依次是下面这样子

<link href="https://www.mochengli.cn/usr/themes/otk/assets/hljs/styles/atom-one-dark.css" rel="stylesheet"> //例如atom-one-dark.css
<script src="https://www.mochengli.cn/usr/themes/otk/assets/hljs/highlight.pack.js"></script>//引入高亮js文件
<script>hljs.initHighlightingOnLoad();</script>//开启高亮模式

最后就是把代码写在<pre><code>代码写在这里</code></pre>中就可以啦