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

2022-03-24 0 116

最近在弄东西,需要把百度编辑器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>

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

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

无忧资源库-提供最新的网站源码及设计插件下载! 技术教程 百度编辑器UEditor借助Prism.js实现文章代码高亮显示实用教程 http://www.wyzyk.com/jsjc/625.html

爱创意-爱学习-爱分享(www.wyzyk.com)专注网络素材分享!提供了PS教程,视频素材,Maya插件,AE模板,精品软件及网站源码等一站式服务,让每一个人能在步入社会或正在工作中的你增加知识,当然也希望大家能用好无忧资源库,学好网络技术.

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务

  • 0 +

    访问总数

  • 0 +

    会员总数

  • 0 +

    文章总数

  • 0 +

    今日发布

  • 0 +

    本周发布

  • 0 +

    运行天数

你的前景,远超我们想象!