我要评论在 wordpress 中加入了百度的 ueditor 编辑器后，由于自带的代码插件在使用时只会在代码外层加入 pre 标签，如图：
但实际 prism 高亮需要下面这种格式的支持：
<pre class="line-numbers language-csharp">
<code>
//高亮代码
</code>
</pre>
所以为了能够支持 pre 中没有 code 标签的情况，在文件 prism.js 中查找 highlightall 并修改如下代码：
....
highlightall: function(async, callback) {
//var elements = document.queryselectorall('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code');
//for (var i=0, element; element = elements[i++];) {
// _.highlightelement(element, async === true, callback);
//}
//支持 pre 标签，修改为
var clsreg = /\s*\blanguage-\b\s*/;
var pres = document.queryselectorall("pre");
for (var i = 0, pre; pre = pres[i++];) {
var iscode = false;
if ((pre.firstchild
&& (iscode = (pre.firstchild.tagname === "code"))
&& clsreg.test(pre.firstchild.classname))
|| clsreg.test(pre.classname)) {
if (!iscode) pre.innerhtml = "<code>" + pre.innerhtml + "</code>";
_.highlightelement(pre.firstchild, async === true, callback);
}
}
}
....
修改后进行 js 压缩，然后覆盖原文件，然后在 wordpress ueditor 中插入的代码在前端页面就能高亮显示了。
prism 高亮官网地址：http://prismjs.com/
prism github 地址：https://github.com/prismjs/prism
发表评论