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

在 WordPress 里集成了百度的 UEditor 编辑器之后，许多朋友可能会遇到一个比较头疼的问题——自带的代码插件，输出代码时只在最外层包了一层

 标签，就像下面这张图展示的那样：




但 Prism 这个代码高亮库，想要正常工作，代码格式其实得长这样：

  
      
    //高亮代码  
  


说白了，就是 
 里面必须嵌套一个  标签，Prism 才能正确识别并高亮。那么问题来了：怎么让 UEditor 输出的代码，也能适配 Prism 的这种要求？


方法其实很简单，打开 Prism.js 文件，找到 highlightAll 这个函数，把里面的代码按照下面这样改一下就行：

....
highlightAll: function(async, callback) {
  // 原来的代码，默认只找 code 标签
  //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 = "" + pre.innerHTML + "";
      _.highlightElement(pre.firstChild, async === true, callback);
    }
  }
}
....

这段修改的核心思路是：先判断 
 标签本身或者它的第一个子元素是否带有 language- 这类 class。如果找到了，但子元素不是 ，那就手动给它包一层  标签。这样一来，不管 UEditor 输出的是哪种格式，Prism 都能正常识别并高亮。


把修改后的代码压缩一下，覆盖原文件，再回到 WordPress 的 UEditor 里插入代码，前端页面就能看到漂亮的代码高亮效果了。其实改动并不大，但效果立竿见影。