今天看了一站長寫的一篇兩步教你開啟KindEditor代碼高亮功能,根據他的教程配置之后發現高亮代碼總體來講是非常好的,但會有些小bug了,針對此問題一聚教程小編進行了整理修復,希望對你會帶來幫助.

我整理了一下用法,供大家參考,前臺頁面先加載插件腳本和樣式,代碼如下:

1. <link rel="stylesheet" type="text/css" href="[kePath]/plugins/code/prettify.css" />  
2. <script type="text/javascript" src="[kePath]/plugins/code/prettify.js"></script>  
3. <script>  
4. $(function(){ prettyPrint(); });  
5. </script> 

后臺編輯器聲明的時候加上插件樣式,缺省這個參數,編輯器中插入代碼跟普通文字一樣,并且再次編輯的時候被隱藏了,所以這一步很關鍵,代碼如下:

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

按上面的方法配置代碼高亮是可以的,如果在wordpress后臺開啟kindeditor代碼高亮，那么你發布的代碼,就可以使用google代碼高亮樣式了,但是使用中發現個bug,就是只有在頁面完全載入后才會高亮代碼,在此之前是一片灰,有時個別外鏈的圖片速度很慢,那么代碼長時間處于灰色的“不可讀”狀態.

原因分析:由于使用了window.onload,所以只有在頁面完全載入的時候才會執行,包括圖片文件的下載,而我們的網站使用的大量第三方資源,例如gravatar的頭像,百度分享,多說評論什么的,說不定什么時候它們抽個風(gravatar的頭像速度超慢),那么prettyPrint就一直無法執行,代碼也就一片灰.

修改方法:打開/wp-content/plugins/kindeditor-for-wordpress/kindeditor-class.php文件,找到如下代碼:

1. window.onload = function(){ 
2.         prettyPrint(); 
3. } 
4. //修改為： 
5. $(function(){ 
6.         prettyPrint(); 
7. }) 

保存退出,打開/wp-content/plugins/kindeditor-for-wordpress/kindeditor.php文件,找到如下代碼:

add_action('wp_enqueue_scripts', array(&$kindeditor, 'add_head_script'));

修改為:add_action('wp_footer', array(&$kindeditor, 'add_head_script'));

把 Kindeditor 的高亮代碼 js 注冊在底部(注意:不一定要在wp_footer,你可以根據實際情況自己修改,總之在引入 jQuery 之后就好了),保存.