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 中沒(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
相關(guān)文章
這篇文章主要介紹了一款垃圾中的極品HTML編輯器(兼容IE OR FF)2007-04-04
今天筆者就給大家推薦一款百度UEditor編輯器。關(guān)于這款百度UEditor編輯器官網(wǎng)上也有簡(jiǎn)單的教程，不過(guò)看著比較費(fèi)勁，今天筆者就跟大家分享一下百度UEditor編輯器使用教程與使用方法，希望對(duì)大家有所幫助2016-11-11
PHP網(wǎng)頁(yè) Ewebeditor 編輯器嵌入方法
因?yàn)閑webeditor編輯器的功能強(qiáng)大，容易擴(kuò)展等原因，一直是大家比較喜愛(ài)的編輯器，所以下面介紹下ewebeditor如何跟php結(jié)合。2009-07-07
UEditor 默認(rèn)字體和字號(hào)的修改方法
這篇文章主要介紹了UEditor 默認(rèn)字體和字號(hào)的修改方法,需要的朋友可以參考下2017-03-03
FCKeditor + SyntaxHighlighter 讓代碼高亮著色插件
FCKeditor是現(xiàn)在最為流行的開(kāi)源編輯器，SyntaxHighlighter是一個(gè)用JS實(shí)現(xiàn)的代碼高亮顯示插件，F(xiàn)CKeditor + SyntaxHighlighter 讓代碼高亮著色，可以最小化修改您的程序?qū)崿F(xiàn)效果2014-06-06
Edge瀏覽器開(kāi)發(fā)者工具代碼修改同步到Vscode中
這篇文章主要為答案及介紹了Edge瀏覽器開(kāi)發(fā)者工具代碼修改同步到Vscode中，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-04-04
Browsersync能讓瀏覽器實(shí)時(shí)、快速響應(yīng)您的文件更改（html、js、css、sass、less等）并自動(dòng)刷新頁(yè)面。下面小編來(lái)帶大家了解下如何使用2019-05-05
ckeditor 簡(jiǎn)單配置使用方法2010-01-01
FCKEDITOR 的高級(jí)功能和常見(jiàn)問(wèn)題的解決方法
FCKeditor是一個(gè)專門使用在網(wǎng)頁(yè)上屬于開(kāi)放源代碼的所見(jiàn)即所得文字編輯器。它志于輕量化，不需要太復(fù)雜的安裝步驟即可使用。2010-01-01
又一個(gè)不錯(cuò)的FCKeditor 2.2的安裝、修改和調(diào)用方法
又一個(gè)不錯(cuò)的FCKeditor 2.2的安裝、修改和調(diào)用方法...2007-11-11