this.$nextTick(() => {
const codes = document.querySelectorAll(".html_body pre code");
// elem 是一个 object
codes.forEach(elem => {
elem.innerHTML = "<ul><li>" + elem.innerHTML.replace(/n/g, "n</li><li>") + "n</li></ul>"
hljs.highlightBlock(elem);
});
});
}
原本通过 highlight.js这个库在显示语法高亮的时候，是没有行号的。这里我进行了扩展
通过
document.querySelectorAll(".html_body pre code") 找到nodeList然后对其循环，动态添加 ul , li, 这样就可以显示行号了
不过这需要对 highlight的css文件添加几个样式
源码里面我把highlight中的css文件全部copy到项目中了，使用的是github.css
具体位置是在项目中的 assets/markdown/styles/github.css
如果想使用其它的主题，可以自己修改其它的对应的css文件，这里使用了github的主题，所以只修改了github.css这一个文件
有兴趣的可以查看一下
github.css文件的提交记录
具体的思路就是这些，水平有限，难免有bug，如有发现，欢迎提出
总结
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对软件开发网的支持。
