佳木斯湛栽影视文化发展公司

主頁 > 知識庫 > Prism 代碼高亮修改不包含 Code 標簽的支持

Prism 代碼高亮修改不包含 Code 標簽的支持

熱門標簽:智能手機 呼叫中心市場需求 檢查注冊表項 鐵路電話系統(tǒng) 網(wǎng)站文章發(fā)布 美圖手機 服務(wù)器配置 銀行業(yè)務(wù)

在 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 高亮官網(wǎng)地址:http://prismjs.com/

Prism GitHub  地址:https://github.com/PrismJS/prism

標簽:新疆 樂山 滄州 長治 紅河 沈陽 上海 河南

巨人網(wǎng)絡(luò)通訊聲明:本文標題《Prism 代碼高亮修改不包含 Code 標簽的支持》,本文關(guān)鍵詞  ;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 收縮
    • 微信客服
    • 微信二維碼
    • 電話咨詢

    • 400-1100-266
    博白县| 中山市| 化德县| 甘谷县| 巍山| 张北县| 长兴县| 界首市| 洛隆县| 肃南| 罗源县| 嵊泗县| 巴彦县| 鲜城| 南城县| 临颍县| 昌平区| 垣曲县| 同心县| 梧州市| 高邑县| 高陵县| 松阳县| 峨边| 沁阳市| 融水| 阿拉善左旗| 吴桥县| 攀枝花市| 闵行区| 缙云县| 盖州市| 伊宁市| 周宁县| 敖汉旗| 苏尼特左旗| 北安市| 五莲县| 门源| 都昌县| 冀州市|