wordpress结合Kindeditor实现代码高亮和代码自动行号

其实wp有很多优秀的代码高亮插件：

1、codecolorer  2、WP-SynHighlight   3、wp-syntax

但是貌似都不太好用，要不就是需要切换到源码修改， 然后wp自带的编辑器也不太好用，索性换个编辑器插件 Kindeditor for wordpress 

既解决了编辑器不好用，又解决了代码高亮问题

wordpress下KindEditor代码高亮与行号显示

本次测试的kindeditor是1.3.7版本的插件

方法1、手动开启行号，加上linenums样式  。

kindeditor默认未开启代码行号显示功能的，可以通过在html视图下，将需要显示行号的代码做如下更改：

<pre class="prettyprint'//改为：<pre class="prettyprint linenums'

方法二、自动开启行号

在kindeditor插件所在路劲找到code.js，修改如下

修改以后缓存特别严重 ，一定记得清空缓存

添加类似SyntaxHighlighter相关样式，

样式多少有点不太满意 自己另行修改

pre.prettyprint {margin-left: 5px;padding-left: 18px;border-left: 3px solid #6CE26C;font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !important;overflow: auto;}/*font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !important;*//*font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;*/pre.prettyprint.linenumstrigger {margin-left: 0px;padding-left: 0px;border-left: 0px; }pre.prettyprintol li { margin-left: 18px;padding-left: 18px;border-left: 3px solid #6CE26C; }pre ol li.highlighttrigger {background-color: #DAD7FF; }.str { color: #080; }.kwd { color: #008; font-weight: bold; }.com { color: #800; }.typ { color: #606; font-weight: bold; }.lit { color: #066; }.pun { color: #660; }.pln { color: #000; }.tag { color: #008; }.atn { color: #606; }.atv { color: #080; }.dec { color: #606; }@media print {.str { color: #060; }.kwd { color: #006; font-weight: bold; }.com { color: #600; font-style: italic; }.typ { color: #404; font-weight: bold; }.lit { color: #044; }.pun { color: #440; }.pln { color: #000; }.tag { color: #006; font-weight: bold; }.atn { color: #404; }.atv { color: #060; }}

注意：以上样式我是添加在模板的样式中，而不是修改Kindeditor插件里面的prettify.css，这是因为防止升级造成不必要麻烦，而且在后台没有开启代码高亮功能，如果Kindeditor插件会在html中追加一个js和css文件反而增加了请求数

后记：

正常使用了一段时间的行号显示和代码高亮在升级wordpress版本后前端又出现异常，后来增加了一处优化的地方，打开/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 之后就好了），保存。这样就OK了。因为无论什么页面都会调用footer底部

案例地址：http://17dev.sinaapp.com/css-center.html css水平居中,垂直居中完全结局方案