SyntaxHighlighter代码高亮不生效的问题解决方法
微wx笑
2023-01-03【运维日志】
3
0关键字：
SyntaxHighlighter 代码高亮 UEditor
百度UEditor，整合 SyntaxHighlighter 实现代码高亮的功能，最初整合的时候是生效的，代码可以显示出行号以及关键词高亮的效果，但是后来不知道什么原因就不生效了。这是什么原因呢？
百度UEditor，整合 SyntaxHighlighter 实现代码高亮的功能，最初整合的时候是生效的，代码可以显示出行号以及关键词高亮的效果，但是后来不知道什么原因就不生效了。这是什么原因呢？
问题原因分析
作为一个程序员，肯定是去查看代码的实现，跟踪代码逻辑找原因。
网页上调用的是
SyntaxHighlighter.all();
然后是未压缩版本 shCore.js 中 955 行
highlight: function(globalParams, element)
接着是
findElements: function(globalParams, element)
的调用
这个函数里面有两行引起了我的注意
if (item.params['brush'] == null) continue;
看到 brush 你有没有想到什么？
如果你对 UEditor 有一定了解的话，应该想到了，
UEditor 编辑器在添加代码片段的时候可以选择代码的语言
比如上面的代码我选择的是 JavaScript，那么实际的html代码就是下面这样：
<pre class="brush:js;toolbar:false">highlight: function(globalParams, element)</pre>
关键的问题就在于这里的“ class="brush:js;toolbar:false"”
SyntaxHighlighter 就是根据 class 里的内容进行代码高亮处理的。
但是我检查发现我在编辑文章的时候不管添加的什么语言的代码，查看实际的html代码发现都没有 class 属性了；
我明明是选择了代码语言的，怎么添加完，保存文章之后就丢失了呢？
UEditor 配置文件
最根本的问题是出在了 UEditor 配置文件上！
由于从其它网站复制过来的内容会有 class 属性，一方面是相关的 class、css样式代码不会被复制过来，另一方面是如果有和本站的相关样式 class 存在同名的情况，那么就是造成 css 污染，页面显示超出预期，所以就在 UEditor 配置文件中的白名单中把 class 给删除了，结果就导致了这个问题。
解决方法
1、修改 UEditor 的配置文件“”中的白名单，添加 class 属性
,whitList: {
a: ['class', 'target', 'href', 'title', 'style'],
abbr: ['title', 'style'],
address: ['style'],
p: ['class', 'style'],
pre: ['class', 'style'],最关键的一句，允许 pre 标签有 class 属性
pre: ['class', 'style'],
2、修改 shCore.js 文件 932 行的代码
注意：这个不解决根本问题，只是添加了默认样式，使代码片段默认以 plain 文本的方式渲染，至少能显示行号。
修改后的如下：
if (item.params['brush'] == null){
//continue;
item.params['brush'] = 'plain';
item.params['toolbar'] = 'false';
}相关参考
帝国CMS 通过SyntaxHighlighter实现代码高亮/语法高亮
本文由 微wx笑 创作，采用 署名-非商业性使用-相同方式共享 4.0 许可协议，转载请附上原文出处链接及本声明。
原文链接：https://www.ivu4e.cn/blog/service/2023-01-03/1626.html
