修改UEditor中代码着色插件，让网站更加小清新(高大上)

UEditor是由百度WEB前端研发部开发的所见即所得的开源富文本编辑器，具有轻量、可定制、用户体验优秀等特点。

UEditor中自带的代码着色模块生成是基于SyntaxHighlighter风格的，就是昨天发布的文章里面的那个，看的多了也就腻了。所以换一种风格，换一个感觉！

今天的主角是一款名叫Prism的插件，Prism是一款轻量级，可扩展的语法着色工具，符合WEB标准。它压缩后只有2KB。非常易于使用，只需要插入一个CSS和JS文件即可。支持多种着色主题。

而且Prism下载可自由选择需要的语言和主题，每种语言定义约增加300-500的大小。

这图是HTML的着色效果展示。

前文中说到UEditor中自带的代码着色模块生成是基于SyntaxHighlighter风格的，所以要修改UEditor的核心文件中生成代码区域的前缀。

我们需要打开UEditor的入口文件，我这里调用的是ueditor.all.min.js

搜索 brush: 替换成 language-

1.4.3版本中共有三处，修改完之后编辑器基本就没问题了。

由于Prism默认识别的是code标签，而UEditor编辑器生成的是pre标签，所以我们还需要把下载的prism.js文件修改一下。

打开文件搜索：

selector:'code[class*="language-"]

修改成

selector:'pre[class*="language-"]

到此就完全结束了，如果本文对你有用的话请不要忘记分享关注哦！谢谢观看！