在 WordPress 中加入了百度的 UEditor 編輯器后，由于自帶的代碼插件在使用時(shí)只會(huì)在代碼外層加入 pre 標(biāo)簽，如圖：
但實(shí)際 Prism 高亮需要下面這種格式的支持：
pre class="line-numbers language-csharp">
code>
//高亮代碼
/code>
/pre>
所以為了能夠支持 pre 中沒(méi)有 code 標(biāo)簽的情況，在文件 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 標(biāo)簽，修改為
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);
}
}
}
....
修改后進(jìn)行 Js 壓縮，然后覆蓋原文件，然后在 WordPress UEditor 中插入的代碼在前端頁(yè)面就能高亮顯示了。
Prism 高亮官網(wǎng)地址：http://prismjs.com/
Prism GitHub 地址：https://github.com/PrismJS/prism
