百度编辑器UEditor借助Prism.js实现文章代码高亮显示实用教程

需要把百度编辑器UEditor发布的代码高亮显示，想用Prism.js，但是Prism.js仅支持类似。

1. <pre><code class="code language-代码语言">代码</code></pre>

这种格式，而百度编辑器UEditor默认发布的代码则是：

1. <pre class="brush:代码语言;toolbar:false">代码</pre>

最好的办法就是前端显示的时候给转换一下，找了好多，都不理想，好歹从某一篇文章中提取出来一点可用的，特意写一下，以后备用！

1. <script>
2.     var $codepre = $("pre[class]");
3.         if($codepre.length>0){
4.             for(var i = 0;i<$codepre.length;i++){
5.                 var item = $codepre.eq(i);
6.                 var language = "";
7.                 item.attr("class").replace(/brush:([^;]+)/,function(a,b){
8.                 language = b;
9.             });
10.             if(language){
11.                 var codehtml = item.html();
12.                 var code = $("<code>");
13.                 code.attr("class","code lang-"+language);
14.                 code.html(codehtml);
15.                 item.html(code);
16.                 Prism.highlightElement(code[0]);
17.             }
18.         }
19.     }
20. </script>

如果用了显示行数的插件，可以用：

1. <script type="text/javascript">
2.     (function(){
3.         var pres = document.querySelectorAll('pre');
4.         var lineNumberClassName = 'line-numbers';
5.         pres.forEach(function (item, index) {
6.             item.className = item.className == '' ? lineNumberClassName : item.className + ' ' + lineNumberClassName;
7.         });
8.     })();
9. </script>

最终样式：