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

分类：建站教程时间：2024-12-22 18:29 浏览：0 评论：0

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

代码

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

代码

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

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


    (function(){
        var pres = document.querySelectorAll('pre');
        var lineNumberClassName = 'line-numbers';
        pres.forEach(function (item, index) {
            item.className = item.className == '' ? lineNumberClassName : item.className + ' ' + lineNumberClassName;
        });
    })();

最终样式：

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

1. 本站所有资源来源于用户上传或网络，仅作为参考研究使用，如有侵权请邮件联系站长！
2. 本站积分货币获取途径以及用途的解读，想在本站混的好，请务必认真阅读！
3. 本站强烈打击盗版/破解等有损他人权益和违法作为，请各位会员支持正版！
4. 建站教程 > 百度编辑器UEditor借助Prism.js实现文章代码高亮显示实用教程