自己写 highlight.js 行号插件
前端代码高亮插件 highlight.js ，默认是不带行号显示功能的。如果要显示行号，我们得自己实现，或是使用第三方插件。下面就来介绍几种实现方式，并分析优缺点。 1、第一种，使用 <li></li> 标签实现行号 当时还在写这个博客程序时，考察了行号显示功能，发现网上一些文章采用这样的方式自己实现行号显示：以换行符 \n 分割，将每行代码用 <li></li> 标签进行包裹，再在最外层用 <ol></ol> 标签包裹，设置 css 样式，利用 ol 列表内的 li 自动编号的特性，轻松的实现了行号显示。 这个方法最简单，但是有缺陷：遇到多行文本高亮着色时，highlight.js 是在第一行前面加 <span class="xxx"> 标签，在最后一行末尾加 </span> 闭合。如果简单的用 <li></li> 对每行进行包裹，就会造成 <span> 标签没有正常闭合，又根据 html 标签自动闭合的特性，仅有第一行能正常着色！ 添加行号前： 添加行号后： 因为这个缺陷，所以我放弃使用这个方法。 2、第二种，使用 highlightjs-line-numbers.js 插件显示行号 highlightjs-line-numbers.js 这个插件应该是用得比较多的了，目前在 github 上有 243 个 star，本博客程序最初也是使用这个插件。 他的实现方式是，将