wordpress自带的编辑器不符合中国国情，一直使用的都是kindeditor编辑器，该编辑器自带有google prettyprint 代码高亮，通过改造后，完全可以实现SyntaxHighlighter插件的显示效果。而且更轻巧快速。

一、代码自动行号功能

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

1<pre class="prettyprint'>
2//改为：
3<pre class=" linenums="" prettyprint="">

不过虽然这样自定义很强，不过想在实现增加行号每次都手工添加还是比较麻烦，有没有一劳永逸的办法呢？当然可以的，可以修改wp-content/plugins/kindeditor-for-wordpress/plugins/code/code.js文件：

1html = '<pre class="prettyprint' + cls + '">n' + K.escape(code) + '
2<p> ';<br></br>
3更改为<br></br>
4html = '</p>
5<pre class="prettyprint linenums' + cls + '">n' + K.escape(code) + '
6<p> ';</p>

以后每次再插入程序代码的时候就自动带有行号。

二、主题及prettify.css修改

本身我的prettify.css使用的并不是默认插件自带，也是自改过，改过的效果有点类似SyntaxHighlighter插件的显示效果，不过在增加完行号后，发现在行号左侧多了两个绿色竖线。严重影响美观，现做如下调整。

1、修改prettify.css高亮格式代码，修改后的内容如下：

 1pre.prettyprint {
 2margin-left: 5px;
 3padding-left: 18px;
 4border-left: 3px solid #6CE26C;
 5font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !important;
 6overflow: auto;}
 7/*font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !important;*/
 8/*font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important;*/
 9pre.prettyprint.linenumstrigger {
10margin-left: 0px;
11padding-left: 0px;
12border-left: 0px; }
13pre.prettyprint
14ol li { margin-left: 18px;
15padding-left: 18px;
16border-left: 3px solid #6CE26C; }
17pre ol li.highlighttrigger {
18background-color: #DAD7FF; }
19.str { color: #080; }
20.kwd { color: #008; font-weight: bold; }
21.com { color: #800; }
22.typ { color: #606; font-weight: bold; }
23.lit { color: #066; }
24.pun { color: #660; }
25.pln { color: #000; }
26.tag { color: #008; }
27.atn { color: #606; }
28.atv { color: #080; }
29.dec { color: #606; }
30@media print {
31.str { color: #060; }
32.kwd { color: #006; font-weight: bold; }
33.com { color: #600; font-style: italic; }
34.typ { color: #404; font-weight: bold; }
35.lit { color: #044; }
36.pun { color: #440; }
37.pln { color: #000; }
38.tag { color: #006; font-weight: bold; }
39.atn { color: #404; }
40.atv { color: #060; }}

修改完成后，虽然还是两条绿色竖线，不过两条线变成了在行号两边了。根据公司美工的建议，左边去掉线的效果在主题里禁用比较方便。

2、修改主题css

打开wp-contentthemesinove_whitestyle.css文件，在最后增加 pre.prettyprint{border-left:none}，这样改后，左边的竖线是没了，不过左边的边框也没了，和代码框另外三边显的不协调，把该行代码修改为：

1pre.prettyprint{border-left:1px dashed #CCC;}

ok，效果实现，和SyntaxHighlighter插件的显示效果一样，而且更轻巧快速。

后记：

正常使用了一段时间的行号显示和代码高亮在升级wordpress版本后前端又出现异常，后来增加了一处优化的地方，打开/wp-content/plugins/kindeditor-for-wordpress/kindeditor.php文件，找到：

1add_action('wp_enqueue_scripts', array(&$kindeditor, 'add_head_script'));
2修改为：
3add_action('wp_footer', array(&$kindeditor, 'add_head_script'));

修改的作用是把 Kindeditor 的高亮代码 js 注册在底部（注意：不一定要在wp_footer，你可以根据实际情况自己修改，总之在引入 jQuery 之后就好了），保存。这样就OK了。因为无论什么页面都会调用footer底部。