kindeditor4.x整合SyntaxHighlight…
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>\';
改为以下的内容：
| |
//将代码高亮替换为SyntaxHighlighter插件需要的类名 |
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>\'
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
(shBrushPhp.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(
\'php /syntax/shBrushPhp.js\',
\'html xml /syntax/shBrushXml.js\',
\'css /syntax/shBrushCss.js\',
\'js jscript javascript /syntax/shBrushJScript.js\'
);
SyntaxHighlighter.all();
</script>
注意：
SyntaxHighlighter.autoloader()应该在doc都载入完以后再执行。
如果引用了jQuery，可以放$(document).ready()里，这样的话放在header里也没问题。
但如果原生js，要不放body的onload里，要不放页面最后，比如在、随便找个地方放，就能看到效果了
4.至此，我们的页面应该可以正常高亮显示代码了，不过当我们的代码多行是，在chrome浏览器下右边会显示滚动条，非常影响美观。
解决办法：
打开syntax-highlighter-compress中的样式文件shCoreDefault.css，找个空白处添加
| 1 | .syntaxhighlighter table {margin: 1px 0 !important;} |