使用百度UEditor 的uparse來使代碼高亮

在使用UEditor 的時候，我們會發現在UEditor 的文件夾中有一個ueditor.parse.js的文件，這個是做什麼用的呢？

這個主要是在文章顯示頁面實現一些比較複雜的樣式，比如圖表展示，代碼高亮，自定義的列表標號

我們本次所說的就是使用UEditor集成的代碼高亮插件實現代碼高亮。

首先在編輯的時候，選擇一種代碼語言，然後編輯保存。

然後在顯示的前端頁面中加載 ueditor.parse.js，其中src路徑爲實際存放Ueditor的路徑

<script type="text/javascript" src="/ueditor/ueditor.parse.js"></script>

然後在頁面初始化的時候，對顯示內容的那個div進行執行解析。

假設文章的div 的id爲 content，則初始化代碼如下：

<script type="text/javascript">
    $(function () {       
        uParse('#content', {
            rootPath: '/ueditor/'
        })
    })
</script>

其中 rootPath 爲實際存放Ueditor的路徑。

 

這樣解析後顯示的語法高亮結果如下（效果展示網頁：http://www.xiaodong.live/content/12.html）：