highlightjsjs是一款优秀的代码高亮Js组件可鉯很方便地对各种语言编写的代码添加语法高亮样式。
然而highlightjsjs默认是不包括显示代码行号(Line Number)这一特性的,不过可以通过简单的JS代码和CSS样式表实现对highlightjsjs的行号显示功能
实际上很简单,首先找到代码块$('pre code')然后取得内容并按照换行符split,我们可以得到代码块的行数最后,我们构建一个包含从数字1到行数n的行号列表然后把这个列表追加到</pre>和</code>的闭合标签之间。
此外通过添加适当的css样式将行号列表渲染到代码的左手邊缘使用时请结合页面样式对下面的css做出相应修改。
通过上面的js代码和css样式表即可完成简单易用的highlightjsjs行号显示。
请尊重作者的劳动成果转载请注明出处!书影博客保留对文章的所有权利。