百度編輯器(ueditor)功能豐富，在移動端的適配也做的不錯，而且自帶了代碼塊的編輯和高亮顯示功能。
打開代碼塊的編輯和顯示功能，有下面3個步驟：
1/3 編輯器的菜單配置
注意菜單項的配置是否包括了插入代碼的菜單項；
菜單名稱：insertcode ，菜單項的默認(rèn)配置文件是 ueditor.config.js
toolbars = [[
'source','insertcode',
'bold', 'italic', 'underline', 'strikethrough', 'customstyle', '|', 'forecolor', 'backcolor', 'insertorderedlist', 'insertunorderedlist', '|',
'lineheight', '|','fontfamily', 'fontsize', '|',
'justifyleft', 'justifycenter', 'justifyright', 'justifyjustify','indent' ,'removeformat', '|',
'link',
'insertimage', 'insertvideo', 'attachment', '|', 'inserttable', 'deletetable', 'insertparagraphbeforetable', 'insertrow', 'deleterow', 'insertcol', 'deletecol', 'mergecells',
'spechars'
]];
2/3 編輯器中插入代碼塊
配置好菜單后，編輯器工具菜單欄里會顯示【代碼語言】項的菜單
編輯代碼塊內(nèi)容
從html模式可以看到，代碼是放在<pre></pre>標(biāo)簽中
3/3 內(nèi)容顯示時代碼塊的渲染
前端顯示內(nèi)容時，需要引入SyntaxHighlighter插件，并調(diào)用初始化方法后才會進(jìn)行渲染
<script type="text/JAVAscript" src="/lib/ueditor1_4_3_2/third-party/SyntaxHighlighter/shCore.js"></script>
<link rel="stylesheet" type="text/css" href="/lib/ueditor1_4_3_2/third-party/SyntaxHighlighter/shCoreDefault.css"/>
<script type="text/JavaScript">
$(document).ready(function () {
SyntaxHighlighter.all();
});
</script>
渲染效果
