kindeditor顯示代碼高亮的方法

2024-04-25 20:45:55

字體：大中小

來源：轉載

供稿：網友

由于ueditor的種種bug，所以博主果斷拋棄了它而選擇了kindeditor！kindeditor的配置挺簡單的，就是代碼高亮的顯示效果不太好。
kindeditor代碼高亮的具體配置：
1.首先載入css和js

kindeditorPath/plugins/code/prettify.css
kindeditorPath/plugins/code/prettify.js

2.然后加入以下js代碼即可：

prettyPrint();

但是本人認為kindeditor的代碼高亮效果不是很好，所以就選擇了ueditor的代碼高亮插件。使用ueditor中的代碼高亮插件步驟如下：
1.修改kindeditor中plugins/code/code.js
代碼45行左右改成如下即可

var type = K('.ke-code-type', dialog.div).val(),
code = textarea.val(),
html = '
<pre class="brush:' + type + ';toolbar:false">/n' + K.escape(code) + '</pre>
';

2.將百度編輯器中的third-party/SyntaxHighlighter/shCoreDefault.css和third-party/SyntaxHighlighter/shCore.js復制到code文件夾下，然后在要顯示代碼高亮的頁面加入以下代碼即可

<link href="kindeditorPath/plugins/code/shCoreDefault.css" rel="Stylesheet" type="text/css" />
<script src="kindeditorPath/plugins/code/shCoreDefault.js"></script>
<script>
SyntaxHighlighter.all();
</script>
怎么樣，代碼是不是顯示出來了？

上一篇：kindeditor編輯器中集成ckplayer播放視頻

下一篇：揭秘免費虛擬主機是怎樣“收費”的