kindeditor4整合SyntaxHighlighter，让代码亮起来
第一步：首先修改kindeditor代码高亮写入pre标签时的class类名：
打开/kindeditor4/plugins/code/code.js，找到类似于这样一行
html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code)'</pre>';
改为以下的内容：
html = '<pre class="brush:' + type + ';">\n' + K.escape(code) +'</pre>';
第二步：自定义页面中kindeditor中选择“插入代码”的图标，下拉菜单中的语言选择项：
同样是打开code.js文件，即可看到对应的选项，此处提供一份已经修改后的代码，供参考
html = ['<div style="padding:10px 20px;">', '<div class="ke-dialog-row">', '<select class="ke-code-type">', '<option value="js">JavaScript</option>', '<option value="html">HTML</option>', '<option value="css">CSS</option>', '<option value="php">PHP</option>', '<option value="pl">Perl</option>', '<option value="py">Python</option>', '<option value="ruby">Ruby</option>', '<option value="java">Java</option>', '<option value="vb">ASP/VB</option>', '<option value="cpp">C/C++</option>', '<option value="c-sharp">C#</option>', '<option value="xml">XML</option>', '<option value="shell">Shell</option>', '<option value="as3">ActionScript3</option>', '<option value="cf">ColdFusion</option>', '<option value="delphi">Delphi</option>', '<option value="diff">diff</option>', '<option value="erl">Erlang</option>', '<option value="groovy">Groovy</option>', '<option value="jfx">JavaFX</option>', '<option value="plain">Plain Text</option>', '<option value="scala">Scala</option>', '<option value="sql">SQL</option>', '<option value="">Other</option>', '</select>', '</div>', '<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>', '</div>'].join(''),
此处要注意，选项中，value对应的值要和SyntaxHighlighter的brush aliases对应，SyntaxHighlighter官方支持的brush aliases表如下：
http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/
第三步：kindeditor部分已经改造完毕，下面要在页面中加入SyntaxHighlighter，以支持对代码的高亮解析。
1：下载SyntaxHighlighter，目前官方的最新版本已经更新到3.0.83，官方下载地址为：http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current
2：下载完毕后解压，我们发现script目录中有很对js文件，支持不同语言的解析。复制我们需要解析的语言的js文件，到我们项目中所对应的目录中。 其中：shAutoloader.js //支持语音的自动加载，当然我是把整个插件引入到项目中。
3：复制css样式文件，到我们我们的项目中 第四步：在页面中引入以上文件
<link href="/Public/plugs/syntaxhighlighter/styles/shCore.css" rel="stylesheet" type="text/css"> <link href="/Public/plugs/syntaxhighlighter/styles/shThemeDefault.css" rel="stylesheet" type="text/css"> <script src="/Public/plugs/syntaxhighlighter/scripts/shCore.js"></script> <script src="/Public/plugs/syntaxhighlighter/scripts/shAutoloader.js"></script>
第四步：打开SyntaxHighlighter自动加载功能，开启自动解析
默认其实可以在页面中分别引入单独的需要的解析js文件，但是如果我们的页面需要支持10多种语言，那就需要引入10多个js文件，那样对网页的加载速度有很大的影响，所以我们通过SyntaxHighlighter最新提供的autoloader自动加载功能，加载仅需要解析的js文件
function path() { var args = arguments, result = []; for (var i = 0; i < args.length; i++) result.push(args[i].replace('$', '/Public/plug/syntaxhighlighter/scripts/')); return result } $(function () { SyntaxHighlighter.autoloader.apply(null, path( 'applescript $shBrushAppleScript.js', 'actionscript3 as3 $shBrushAS3.js', 'bash shell $shBrushBash.js', 'coldfusion cf $shBrushColdFusion.js', 'cpp c $shBrushCpp.js', 'c# c-sharp csharp $shBrushCSharp.js', 'css $shBrushCss.js', 'delphi pascal $shBrushDelphi.js', 'diff patch pas $shBrushDiff.js', 'erl erlang $shBrushErlang.js', 'groovy $shBrushGroovy.js', 'java $shBrushJava.js', 'jfx javafx $shBrushJavaFX.js', 'js jscript javascript $shBrushJScript.js', 'perl pl $shBrushPerl.js', 'php $shBrushPhp.js', 'text plain $shBrushPlain.js', 'py python $shBrushPython.js', 'ruby rails ror rb $shBrushRuby.js', 'sass scss $shBrushSass.js', 'scala $shBrushScala.js', 'sql $shBrushSql.js', 'vb vbnet $shBrushVb.js', 'xml xhtml xslt html $shBrushXml.js' )); SyntaxHighlighter.all(); });
SyntaxHighlighter.autoloader()应该在doc都载入完以后再执行。
如果引用了jQuery，可以放$(document).ready()里，这样的话放在header里也没问题。
但如果原生js，要不放body的onload里，要不放页面最后，比如在、随便找个地方放，就能看到效果了
至此，我们的页面应该可以正常高亮显示代码了，不过当我们的代码多行是，在chrome浏览器下右边会显示滚动条，非常影响美观。
解决办法：
打开syntax-highlighter-compress中的样式文件shCoreDefault.css，找个空白处添加
.syntaxhighlighter table {margin: 1px 0 !important;}
如果想在填写表单的时候有代码样式，需要在创建表单的kindeditor的时候，即调用KindEditor.ready()的时候配置的cssPath项中的css文件中加入.ke-content样式，如下例子：
此处并不会使代码语法高亮，只是标识一下代码部分
/**code**/ .ke-content { font-size: 10pt;
} .ke-content pre { font-size:9pt; font-family:Courier New,Arial; border:1px solid #ddd; border-left:5px solid #6CE26C; background:#f6f6f6; padding:5px;
} .ke-content code { margin: 0 2px; padding: 0 5px; white-space: nowrap; border: 1px solid #DDD; background-color: #F6F6F6; border-radius: 3px;
} .ke-content pre>code { margin: 0; padding: 0; white-space: pre; border: none; background: transparent;
} .ke-content pre code { background-color: transparent; border: none;
} .ke-content p { margin: 0 0 15px 0; margin-bottom:15pt; line-height:1.5; letter-spacing: 1px;
} .ke-content div.ref {border:1px solid #ddd;margin:0 0 10px 0;padding:2px;font-size:9pt;background:#ffe;} .ke-content div.ref h4 {margin:0;padding:1px 3px;background:#CC9966;color:#fff;font-size:9pt;font-weight:normal;} .ke-content div.ref .ref_body {margin:0;padding:2px;line-height:20px;color:#666;font-size:9pt;} .ke-content blockquote {margin:15px 10px;border:2px solid #eee;padding:5px 5px 5px 35px;background:#f4f5f7 url('../img/blockquote.gif') no-repeat left top;color:#060;font-size:9pt;}
好了，自此语法高亮已经满足基本使用，效果不错