DeDeCMS本身的標記其不好用,更換為KindEditor后確實很不錯了,但是KindEditor編輯器的代碼高亮確實不怎么好看,也不怎么使用,雖然很簡潔,但是功能上還是顯得匱乏一些,所以就動手改了改,現在分享出來!
首先,下載本站提供的DeDeCMS一鍵傻瓜式安裝KindEditor。詳細說明請查看該頁面。
我們選擇SyntaxHighlighter作為代碼高亮插件,修改/include/kindeditor/plugins/code/code.js
找到:
html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) + '</pre> ';替換為:
html = '<pre class="prettyprint linenums lang-' + cls + '">\n' + K.escape(code) + '</pre> ';
這樣是為了將prettify的類名換為SyntaxHighlighter插件需要的類名,
保存并上傳覆蓋原來的code.js
然后將我提供的附件上傳至/include/kindeditor/plugins/code/目錄,當然,你也可以傳到別的目錄,但是在下一步記得路徑要正確!
附件:SyntaxHighlighter
好了,現在就需要修改前臺模板了
在前臺模板引入附件中的文件:
<script type="text/javascript" src="/include/kindeditor/plugins/code/syntaxhighlighter.js" charset="UTF-8"></script> <link type="text/css" rel="stylesheet" href="/include/kindeditor/plugins/code/shCore.css"/> <link type="text/css" rel="stylesheet" href="/include/kindeditor/plugins/code/shThemeDefault.css"/>
<script type="text/javascript"> SyntaxHighlighter.config.clipboardSwf = '/include/kindeditor/plugins/code/clipboard.swf';SyntaxHighlighter.config.strings={expandSource:'展開代碼',viewSource:'查看代碼',copyToClipboard:'復制代碼',copyToClipboardConfirmation:'復制代碼成功',print:'打印',help:'?',alert:'站長圖庫提示:\n\n', noBrush: '不能找到刷子: ',brushNotHtmlScript: '刷子沒有配置html-script選項',aboutDialog: '<div></div>'}; SyntaxHighlighter.all();</script>
好了,到這里就結束了,發篇文章看看效果吧!
還是上張圖吧!