bjyblog的二开及优化(3) 更换百度编辑器(UEditor)的代码高亮为highlight.js

老刘博客

UEditor的代码高亮是不是太丑了,这次就拿他动刀...

如果你也想把这个丑陋的代码更换掉,那就请接着观看:


之前在网上搜索了很多的解决方案.只是觉得李维山的这篇原创文章挺好的,原文地址

他使用的是highlight.js替换掉UEditor的SyntaxHighlighter来实现的, 虽然没有行号, 但有着众多的配色, 已经是比之前的样子好很多了.

老刘博客

老刘博客

首先到官网去下载这个插件:https://highlightjs.org/download/

选择好语言 Download下载

老刘博客

下载回来的压缩包,内容如下:

老刘博客

其中, highlight.pack.js是必须要在页面中引入的.

而style文件夹中的css文件, 选一个喜欢的引入到页面中即可.


然后,在/Template/default/Home/Index/的article.html中进行修改:

老刘博客


具体的代码如下:

<!-- 加入代码高亮highlight -->
<link rel="stylesheet" type="text/css" href="__PUBLIC__/static/highlight/css/atelier-dune-dark.css">
<script type="text/javascript" src="__PUBLIC__/static/highlight/highlight.pack.js"></script>
<script>
    document.querySelectorAll('pre').forEach((block) => {
        hljs.highlightBlock(block);
    });
</script>


打开你的文章页,看看代码高亮是不是已经变成暗色背景的了?

附注: highlight.js的说明文档

老刘博客
请先登录后发表评论
  • 最新评论
  • 总共0条评论
  • 老刘博客 laoliu.pro © 2018-2019 版权所有
  • 辽ICP备19003301号-1