Prism 代碼高亮修改不包含 Code 標(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
上一篇:讓谷歌瀏覽器Google Chrome支持eWebEditor的方法
欄 目:網(wǎng)頁(yè)編輯器
下一篇:ueditor編輯器不能上傳圖片問(wèn)題的解決方法
本文標(biāo)題:Prism 代碼高亮修改不包含 Code 標(biāo)簽的支持
本文地址:http://mengdiqiu.com.cn/a1/wangyebianjiqi/11781.html
您可能感興趣的文章
- 01-11FCKeditor + SyntaxHighlighter 讓代碼高亮著色插件
- 01-11百度編輯器ueditor前臺(tái)代碼高亮無(wú)法自動(dòng)換行解決方法
- 01-11SyntaxHighlighter配合CKEditor插件輕松打造代碼語(yǔ)法著色
- 01-11解決SyntaxHighlighter 代碼高亮不換行問(wèn)題的解決方法
- 01-11CKEditor中加入syntaxhighlighter代碼高亮插件
- 01-11ckeditor syntaxhighlighter代碼高亮插件配置分享
- 01-11使用 CodeMirror 打造屬于自己的帶高亮顯示的在線代碼編輯器


閱讀排行
- 1C語(yǔ)言 while語(yǔ)句的用法詳解
- 2java 實(shí)現(xiàn)簡(jiǎn)單圣誕樹(shù)的示例代碼(圣誕
- 3利用C語(yǔ)言實(shí)現(xiàn)“百馬百擔(dān)”問(wèn)題方法
- 4C語(yǔ)言中計(jì)算正弦的相關(guān)函數(shù)總結(jié)
- 5c語(yǔ)言計(jì)算三角形面積代碼
- 6什么是 WSH(腳本宿主)的詳細(xì)解釋
- 7C++ 中隨機(jī)函數(shù)random函數(shù)的使用方法
- 8正則表達(dá)式匹配各種特殊字符
- 9C語(yǔ)言十進(jìn)制轉(zhuǎn)二進(jìn)制代碼實(shí)例
- 10C語(yǔ)言查找數(shù)組里數(shù)字重復(fù)次數(shù)的方法
本欄相關(guān)
- 01-11針對(duì)PHP環(huán)境下Fckeditor編輯器上傳圖片
- 01-11關(guān)于jsp版ueditor1.2.5的部分問(wèn)題解決(上
- 01-11UEditor編輯器自定義上傳圖片或文件路
- 01-11UEditor 編輯器跨域上傳解決方法
- 01-11免費(fèi)開(kāi)源百度編輯器(UEditor)使用方法
- 01-11ckeditor插件開(kāi)發(fā)簡(jiǎn)單實(shí)例
- 01-11使用ZeroClipboard解決跨瀏覽器復(fù)制到剪
- 01-11CKEditor 取消轉(zhuǎn)義的兩種方法
- 01-11FCKeditor + SyntaxHighlighter 讓代碼高亮著
- 01-11為SyntaxHighlighter添加新語(yǔ)言的方法
隨機(jī)閱讀
- 01-11ajax實(shí)現(xiàn)頁(yè)面的局部加載
- 01-10使用C語(yǔ)言求解撲克牌的順子及n個(gè)骰子
- 08-05dedecms(織夢(mèng))副欄目數(shù)量限制代碼修改
- 01-11Mac OSX 打開(kāi)原生自帶讀寫(xiě)NTFS功能(圖文
- 04-02jquery與jsp,用jquery
- 08-05DEDE織夢(mèng)data目錄下的sessions文件夾有什
- 01-10delphi制作wav文件的方法
- 08-05織夢(mèng)dedecms什么時(shí)候用欄目交叉功能?
- 01-10C#中split用法實(shí)例總結(jié)
- 01-10SublimeText編譯C開(kāi)發(fā)環(huán)境設(shè)置