Prism 代碼高亮修改不包含 Code 標(biāo)簽的支持
更新時(shí)間：2017年03月25日 22:33:37 投稿：mdxy-dxy
在 WordPress 中加入了百度的 UEditor 編輯器后，由于自帶的代碼插件在使用時(shí)只會(huì)在代碼外層加入 pre 標(biāo)簽，下面給出解決方法,需要的朋友可以參考下
在 WordPress 中加入了百度的 UEditor 編輯器后，由于自帶的代碼插件在使用時(shí)只會(huì)在代碼外層加入 pre 標(biāo)簽，如圖：
但實(shí)際 Prism 高亮需要下面這種格式的支持：
<pre class="line-numbers language-csharp">
<code>
//高亮代碼
</code>
</pre>
所以為了能夠支持 pre 中沒有 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
相關(guān)文章
FCKeditor 圖片上傳進(jìn)度條不動(dòng)的解決方法
開發(fā)的“歷史五千年”網(wǎng)站，使用FCKeditor，在本地上傳圖片一切正常，但昨天晚上實(shí)際向網(wǎng)絡(luò)服務(wù)器（Windows Server 2003）發(fā)送圖片時(shí)，發(fā)送圖像進(jìn)度條一直在滾動(dòng)，無(wú)法關(guān)閉，通過(guò)FTP服務(wù)器查看服務(wù)器，圖片已經(jīng)傳送上去，但這個(gè)滾動(dòng)條卻無(wú)法結(jié)束。2011-08-08
FCKeditorAPI是FCKeditor加載后注冊(cè)的一個(gè)全局對(duì)象，利用它我們就可以完成對(duì)編輯器的各種操作。2010-07-07
CKEditor固有的一些文件被組織到_source目錄里. 核心的功能，諸如DOM元素操作，事件處理，初始化腳本和一些環(huán)境設(shè)置被包含在_source\core文件夾內(nèi). 而其它的一些功能, 比如格式化，拷貝和粘貼, 圖片和鏈接, 都被實(shí)現(xiàn)為插件形式放在_source\plugins文件夾內(nèi)2017-03-03
這篇文章主要介紹了讓IE8和IE9支持eWebEditor在線編輯器的方法,eWebEditor常用在ASP制作的網(wǎng)站后臺(tái)中,是比較古老的一款在線編輯器了,需要讓IE8和IE9支持的朋友可以參考下2014-06-06
myFocus 一個(gè)KindEditor的焦點(diǎn)圖插件
使用KindEditor(富文本編輯器)提供的接口將myFocus（焦點(diǎn)圖庫(kù)）集成在KindEditor上2011-04-04
DISCUZ論壇的UBB編輯器（增加靈活調(diào)用，支持ASP UBB解析)打包下載
從Discuz分離的網(wǎng)頁(yè)編輯器，大家可以加到自己的頁(yè)面上2008-04-04
FCKeditor 插件開發(fā) 示例（詳細(xì)版本）
2009-06-06
FCKeditor smarty 編輯器的應(yīng)用PHP
自己仔細(xì)研究一下很容易解決你這個(gè)問(wèn)題的。這并不是一個(gè)很困難的任務(wù)。其實(shí)這里很多都是菜鳥級(jí)別的2012-07-07
輕松實(shí)現(xiàn) CKfinder進(jìn)駐CKEditor3.0
看完YaSin寫得“將CKfinder 整合進(jìn) CKEditor3.0 ”之后，我總覺得問(wèn)題有點(diǎn)復(fù)雜，尤其是修改壓縮了的js文件。2010-01-01
百度編輯器ueditor前臺(tái)代碼高亮無(wú)法自動(dòng)換行解決方法
這兩天本站成功安裝整合了百度編輯器ueditor，用著還挺不錯(cuò)，但是遇到了點(diǎn)小問(wèn)題2013-12-12