使用highlight.js让网站的代码高亮

Highlight.js是一个可以给pre标签中的代码高亮的插件，highlight不依赖于第三方js库，支持185种语言和89种样式风格，它可以自动检测语言，完美兼容各种框架。

打开highlight官网后点击language可以切换预览语言，style可以切换代码显示的样式，我选择了atom-one-dark的样式。

准备资料

进入highlight官网下载 https://highlightjs.org/download/ 下载前可以选择你需要的语言。将下载好的压缩包解压缩后，你会发现styles文件夹有几十种风格css可以选择，默认是default.css，如果要换风格，直接将default.css换掉即可。比如我使用的是atom-one-dark那么改成atom-one-dark.css将js和css文件加入到html中。

使用教程

1、先引入需要的文件以下代码

<link rel="stylesheet" href="atom-one-dark.css">
<script src="highlight.min.js"></script>

2、为需要高亮的代码添加pre标签

<pre><code>这里就是要显示高亮的代码</code></pre>

3、使用工具将你的代码转换成自带高亮标签的代码。再放到pre>code标签里面。此方法无需调用initHighlightingOnLoad方法，即可高亮。

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

大功告成。就是三个步骤highlight.js即可让您网站的代码高亮起来。