• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Prism 代码高亮修改不包含 Code 标签的支持

    在 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

    上一篇:UEditor 默认字体和字号的修改方法
    下一篇:百度编辑器Ueditor增加字体的修改方法
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

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