使用highlight.js来实现代码高亮

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

highlight.js是一款基于JavaScript的语法高亮库，能够让网页上的代码显示接近我们使用的代码编辑器的高亮样式，从而看起来更舒服，增强阅读体验。

highlight.js的技术特性

支持 197 种开发语言和 248 种代码高亮风格主题
自动语言检测
支持多种语言混合代码同时高亮
支持 npm 安装，可以在 Vue.js 中使用，也可以在 node.js 中使用
适用于任何标记
无依赖，兼容任何js框架

如何使用highlight.js

1、获取highlight.js库

官网地址：https://highlightjs.org/

点击Get version按钮进入语言选择，勾选你常用的语言，在使用插件时会自动检测你要展示的代码的语言，并自动让代码高亮。通常common就足够用了。

选好后点击下面的download按钮，下载，解压。里面styles目录下是所有的css样式，决定代码的颜色；highlight.min.js 为库文件，决定代码哪些部分会变高亮。

2、在html页面中引入js和css文件

<link rel="stylesheet" href="/styles/default.min.css">
<script src="/highlight.min.js"></script>
<script>hljs.highlightAll();</script>

这将在其中找到并突出显示代码的 <pre><code> 标签，它会尝试自动检测语言。 当然你也可以在使用中手动指定语言 class属性：

<pre><code class="language-html">
这里写代码
</code></pre>

如果你的代码里包含标签，需要进行转义，记得将标签里的 < 换成<，把 > 换成 >

官网提供了详尽的使用文档，有更多代码高亮的控制方法，可以点击查看：https://highlightjs.org/usage/

3、Highlight.js如何支持显示行号

highlight.js 默认不支持显示行号，它的作者说了一大堆不支持行号的理由，但是我觉得还是非常需要的。

找到了一个不错的插件，highlight.ln.js，只要引用这个js，不用其他的配置就能实现显示行号，数字和边框颜色将继承选择的主题颜色。比网上其他方式要方便一些，大家可以尝试一下。

预览：https://taufik-nurrohman.js.org/highlight.ln.js/

对比

其实相比 highlight.js ，我更加喜欢 Prism.js，虽说 highlight.js 可以自动检测代码语言，但是我认为大家贴代码的时候都会写上语言名字的，所以花很多功夫实现一个自动语法检测好像没有太大的意义，同时还不支持行号。

Prism.js 有挺多插件，同时在打包使用的时候可以直接选择上需要的插件，比如我需要行号和代码复制，就勾选上这2个插件，他就可以直接打包在一起，非常方便。

推荐阅读：使用Prism.js来实现代码高亮