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视图下，将需要显示行号的代码做如下更改：

 
   
 
    
 
   
 
   
方法二、自动开启行号
 
  

在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.prettyprint
ol 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水平居中,垂直居中完全结局方案