优化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 之后就好了),保存。

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



标签:

无觅相关文章插件,快速提升流量