[转]百度编辑器(UEditor)结合highlight.js实现代码高亮显示

使百度编辑器代码高亮的方法网上一搜一大片,基本上全是在页面里引入下面这些:

虽然可以实现代码高亮,但是是这种效果,并不是想要的(盗一张白大神的图,不好意思~~)

 

想要的是类似csdn这种黑色背景的代码高亮显示,经过各种查找比较,最终使用了highlight.js这个插件来实现效果

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

选择好语言 Download下载

 

解压后目录结构如下:

 

下面写一个例子来使用highlight.js实现代码高亮显示:

(这里引入的是csdn用的同款主题:tomorrow-night-eighties)

如下:

 

 

这里使代码高亮遵循的格式是:<pre><code>你的代码</code></pre>

而百度编辑器默认的代码块显示格式为:<pre>你的代码</pre>

所以我试图在ueditor.all.js里面给pre标签嵌套code标签,结果没什么卵用

于是下面这段js代码诞生了,循环往pre标签里添加code标签(扔到代码最下面)

 

我们还可以给代码块自定义样式,例如:代码块宽度、字体大小、行高、不强制换行等等

 

 

觉得好的话记得打赏赞助小灰灰哦,小灰灰灰更有动力的,谢谢

小灰灰

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: