主页 > 知识库 > Prism 代码高亮修改不包含 Code 标签的支持

Prism 代码高亮修改不包含 Code 标签的支持

热门标签:天津电销卡外呼系统线路 四平电话机器人哪家好 长春防封卡电销卡套餐 长春销售外呼系统业务 兴化400电话办理多少钱 株洲外呼营销系统有哪些 智能电销机器人真的好吗 企业电话机器人办理 灵声智能电话机器人招聘

在 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 高亮官网地址:http://prismjs.com/

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

标签:漯河 运城 贵港 石嘴山 黑龙江 巴彦淖尔 青海 新疆

巨人网络通讯声明:本文标题《Prism 代码高亮修改不包含 Code 标签的支持》,本文关键词  Prism,代码,高亮,修改,不,;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 下面列出与本文章《Prism 代码高亮修改不包含 Code 标签的支持》相关的同类信息!
  • 本页收集关于Prism 代码高亮修改不包含 Code 标签的支持的相关信息资讯供网民参考!
  • 推荐文章