開啓KindEditor代碼高亮功能

KindEditor4.0 開始支持插入代碼功能!!!如何使用插入代碼功能實現前段頁面代碼高亮顯示和後臺代碼維護顯示!!!javascript

1. 須要高亮顯示代碼的前臺頁面須要引用相應的css樣式和js文件css

<link href="../../editor/plugins/code/prettify.css" rel="stylesheet" />
<script type="text/javascript" src="../../editor/plugins/code/prettify.js"></script>

2. 插入腳本java

<script type="text/javascript">
    $(function () { prettyPrint(); });
</script>

這樣前臺頁面就可實現相似這樣效果的代碼顯示了!編輯器

以後,還能夠根據本身的喜愛,對現有前臺樣式進行調整,好比個人前臺樣式會引起橫向滾動條顯示不出來,這樣就致使超長行的代碼顯示不全的問題。spa

我修改了對應的prettify.css 文件,將該文件裏的pre.prettyprint 樣式追究了一個overflow:auto 便可....插件

 

but,後臺編輯器維護裏面尚未插件樣式,這樣就致使編輯器中插入的代碼跟普通文字同樣,沒法區分開!因此可以使用以下方式對後臺編輯器裏的顯示進行調整。code

var editor = KindEditor.create('textarea.editor', {
    cssPath : ['[kePath]/plugins/code/prettify.css']
});

這樣後臺編輯器就能夠實現以下所顯示的效果了:blog

相關文章
相關標籤/搜索