kindeditor4.x整合SyntaxHighlighter代碼高亮

kindeditor4.x代碼高亮功能默認使用的是prettify插件，prettify是Google提供的一款源代碼語法高亮着色器，它提供一種簡單的形式來着色HTML頁面上的程序代碼，不過由於SyntaxHighlighter的應用很是普遍，因此將kindeditor默認的prettify替換爲SyntaxHighlighter代碼高亮插件。

1.第一步首先修改kindeditor代碼高亮寫入pre標籤時的class類名：

打開/kindeditor4/plugins/code/code.js，找到相似於這樣一行：

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

改成如下的內容：

//html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) +'</pre>';
//將代碼高亮替換爲SyntaxHighlighter插件須要的類名
html = '<pre class="brush:' + type + ';">\n' + K.escape(code) +'</pre>';
//此處爲將原有寫法註釋，上一行爲修改後的內容。

2.自定義頁面中kindeditor中選擇「插入代碼」的圖標，下拉菜單中的語言選擇項：

一樣是打開code.js文件，便可看到對應的選項，此處提供一份已經修改後的代碼，供參考

'<select class="ke-code-type">',
	'<option value="java">Java</option>',
	'<option value="php">PHP</option>',
	'<option value="html">HTML</option>',
	'<option value="css">CSS</option>',
	'<option value="js">JavaScript</option>',
	'<option value="xml">XML</option>',
	'<option value="shell">Shell</option>',
	'<option value="sql">SQL</option>',
'</select>',

此處要注意，選項中，value對應的值要和SyntaxHighlighter的brush aliases對應，SyntaxHighlighter官方支持的brush aliases表以下：

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

3.kindeditor部分已經改造完畢，下面要在頁面中加入SyntaxHighlighter，以支持對代碼的高亮解析。

第一步：下載SyntaxHighlighter，目前官方的最新版本已經更新到3.0.83，官方下載地址爲：http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current

第二步：下載完畢後解壓，咱們發現script目錄中有很對js文件，支持不一樣語言的解析。複製咱們須要解析的語言的js文件，到咱們項目中所對應的目錄中。同時複製下面三個js文件：

shAutoloader.js //支持語音的自動加載

shCore.js

(shBrushJava.js等，根據本身的須要複製)

第三步：複製css樣式文件，到咱們咱們的項目中：

shCore.css

shThemeDefault.css(也能夠根據本身須要的風格複製對應的樣式文件)

第四步：在頁面中引入以上文件：

<link type="text/css" href="syntax/shCore.css" media="screen" />
<link type="text/css" href="syntax/shThemeDefault.css" media="screen"/>
<script type="text/javascript" src="syntax/shCore.js"></script>
<script type="text/javascript" src="syntax/shAutoloader.js"></script>

第五步：打開SyntaxHighlighter自動加載功能，開啓自動解析

默認其實能夠在頁面中分別引入單獨的須要的解析js文件，可是若是咱們的頁面須要支持10多種語言，那就須要引入10多個js文件，那樣對網頁的加載速度有很大的影響，因此咱們經過SyntaxHighlighter最新提供的autoloader自動加載功能，加載僅須要解析的js文件。

參考代碼以下：

<script type="text/javascript">
SyntaxHighlighter.autoloader(
	'java            /syntax/shBrushJava.js',
	'php            /syntax/shBrushPhp.js',
	'html xml            /syntax/shBrushXml.js',
	'css            /syntax/shBrushCss.js',
	'js jscript javascript            /syntax/shBrushJScript.js',
	'bash shell            /syntax/shBrushBash.js',
	'sql            /syntax/shBrushSql.js'
);
SyntaxHighlighter.all();
</script>

注意：

SyntaxHighlighter.autoloader()應該在doc都載入完之後再執行。
若是引用了jQuery，能夠放$(document).ready()裏，這樣的話放在header裏也沒問題。
但若是原生js，要不放body的onload裏，要不放頁面最後，好比在、隨便找個地方放，就能看到效果了

4.至此，咱們的頁面應該能夠正常高亮顯示代碼了，不過當咱們的代碼多行是，在chrome瀏覽器下右邊會顯示滾動條，很是影響美觀。

解決辦法：

打開syntax-highlighter-compress中的樣式文件shCoreDefault.css，找個空白處添加

.syntaxhighlighter table {margin: 1px 0 !important;}

改好以後，高亮代碼右邊欄滾動條就沒有了，若是使用的其餘風格，就修改其餘風格對應的樣式文件。

注：本文首發於 度外網絡 官方博客： http://www.duwaiweb.com/blog/20120825_a68714ed-b065-4191-8a60-97a53bf234cd.html