优化Kindeditor的代码高亮

由于 WordPress 原本的富文本编辑器功能比较简单，所以使用了 Kindeditor 插件（安装方法看这里）。但是最近发现一个问题，就是在页面没有完全载入的情况下，代码高亮不起来，就是下图的样子：

正常应该是这样的：

原因其实很简单，右键查看源代码，找到“高亮代码”的js是这样写的：

window.onload = function(){
	prettyPrint();
}

window.onload 只有在页面完全载入的时候才会执行，包括图片文件的下载，而我们的网站使用的大量第三方资源，例如gravatar的头像，百度分享，多说评论什么的，说不定什么时候它们抽个风（gravatar的头像速度超慢），那么prettyPrint就一直无法执行，代码也就一片灰。所以我们肯定不能再 window.onload 的时候才执行代码高亮，首先想到的就是 jquery 的 document.ready，那么我们开始着手修改kindeditor wordpress插件。

我们找到 /wp-content/plugins/kindeditor-for-wordpress 下的 kindeditor.php 和 kindeditor-class.php 两个文件。

首先打开 kindeditor-class.php，很容易找到上面的代码，把它修改成：

$(function(){
	prettyPrint();
})

修改完如下图：

然后打开 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 之后就好了），保存。

现在，代码会在第一时间高亮起来，不需等待图片的载入，方便用户阅读。