HTML+CSS

ueditor代码高亮显示


ueditor是百度旗下开源的富文本编辑器,虽然近几年几乎没有新版本发布了,但是依然有很强的生命力,比如我们这里后台一直是用的ueditor的富文本编辑器,本篇文章介绍在富文本编辑器编辑的代码片段如何在前端页面高亮显示。

ueditor富文本编辑器的代码去前台页面高亮显示有两种方式

1、SyntaxHighlighter实现

<script type="text/javascript" src="/public/editor/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="/public/editor/third-party/SyntaxHighlighter/shCoreDefault.css">
<script>SyntaxHighlighter.all();</script>

2、uParse方法实现

<script src="/public/editor/ueditor.parse.js"></script>
<script>
    $(function(){
        uParse('#con',{rootPath:'/public/editor'});
    });
</script>


以上两种方法都可以实现前端的代码高亮显示,但是有一个bug就是换行和行号问题

0.074892s