官网地址:https://highlightjs.org/
选择你需要的语言,点击下载,之后得到一个压缩包,在网页引入highlight.min.js文件和styles目录挑选一个样式引入
<!--引入文件--> <link rel="stylesheet" href="/path/to/styles/default.min.css"> <script type="text/javascript" src="/Highlight/highlight.min.js"></script> <script>hljs.highlightAll();</script>
现在应该可以正常工作了,但是我的不行,因为UEditor的规则,改写编辑器当然太麻烦了,所以
document.addEventListener('DOMContentLoaded', (event) => {
document.querySelectorAll('.aobo pre').forEach((el) => {
hljs.highlightElement(el);
});
});
这样就可以指定aobo样式下的pre中的样式,自动识别的。
这个不支持ie浏览器,还有其他选择比如prettify.js等
然后有个插件可以设置序号,地址:https://github.com/wcoder/highlightjs-line-numbers.js/,本站就是用的这个,可以右键查看源码。