封面

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

<pre><code class="code language-代码语言">代码</code></pre>
全选代码
复制

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

<pre class="brush:代码语言;toolbar:false">代码</pre>
全选代码
复制

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

<script>
    var $codepre = $("pre[class]");
        if($codepre.length>0){
            for(var i = 0;i<$codepre.length;i++){
                var item = $codepre.eq(i);
                var language = "";
                item.attr("class").replace(/brush:([^;]+)/,function(a,b){
                language = b;
            });
            if(language){
                var codehtml = item.html();
                var code = $("<code>");
                code.attr("class","code lang-"+language);
                code.html(codehtml);
                item.html(code);
                Prism.highlightElement(code[0]);
            }
        }
    }
</script>
全选代码
复制

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

<script type="text/javascript">
    (function(){
        var pres = document.querySelectorAll('pre');
        var lineNumberClassName = 'line-numbers';
        pres.forEach(function (item, index) {
            item.className = item.className == '' ? lineNumberClassName : item.className + ' ' + lineNumberClassName;
        });
    })();
</script>
全选代码
复制

最终样式：

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。