wordpress自帶的編輯器不符合中國國情,一直使用的都是kindeditor編輯器,該編輯器自帶有google prettyprint 代碼高亮,通過改造后,完全可以實現SyntaxHighlighter插件的顯示效果,而且更輕巧快速.

一、代碼自動行號功能

kindeditor默認未開啟代碼行號顯示功能的,可以通過在html視圖下,將需要顯示行號的代碼做如下更改:

<pre class="prettyprint'//改為:<pre class="prettyprint linenums'

不過雖然這樣自定義很強,不過想在實現增加行號每次都手工添加還是比較麻煩,有沒有一勞永逸的辦法呢？當然可以的,可以修改wp-contentpluginskindeditor-for-wordpresspluginscodecode.js文件,代碼如下:

html = '<pre class="prettyprint' + cls + '">n' + K.escape(code) + '</pre> ';

更改為 html = '<pre class="prettyprint linenums' + cls + '">n' + K.escape(code) + '</pre> ';

以后每次再插入程序代碼的時候就自動帶有行號.

二、主題及prettify.css修改

本身我的prettify.css使用的并不是默認插件自帶,也是自改過,改過的效果有點類似SyntaxHighlighter插件的顯示效果,不過在增加完行號后,發現在行號左側多了兩個綠色豎線,嚴重影響美觀,現做如下調整。

1、修改prettify.css高亮格式代碼,修改后的內容如下:

1. pre.prettyprint { 
2.     margin-left: 5px; 
3.     padding-left: 18px; 
4.     border-left: 3px solid #6CE26C; 
5.     font-family: Monaco, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', 'Lucida Console', monospace !important; 
6.     overflow: 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;*/ 
9.     pre.prettyprint.linenumstrigger { 
10.     margin-left: 0px; 
11.     padding-left: 0px; 
12.     border-left: 0px; } 
13.     pre.prettyprint 
14.     ol li { margin-left: 18px; 
15.     padding-left: 18px; 
16.     border-left: 3px solid #6CE26C; } 
17.     pre ol li.highlighttrigger { 
18.     background-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}，這樣改后，左邊的豎線是沒了，不過左邊的邊框也沒了，和代碼框另外三邊顯的不協調，把該行代碼修改為：

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

ok,效果實現,和SyntaxHighlighter插件的顯示效果一樣,而且更輕巧快速.