kindeditor + syntaxhighlighter 使文章内的插入代码高亮显示

首先需要在页面中引入所需FE文件：

两个js和一个css文件是必须要引用的文件；

shCore.js是syntaxhighlighter插件的基础代码；

shAutoloader.js作用是syntaxhighlighter插件的代码高亮显示时自动加载所需文件；但是如果目录不正确的话，就会加载失败，解决方法如下SyntaxHighlighter.autoloader.apply()中给出js文件的位置，

<?php
//syntaxhighlighter代码高亮显示需要加载的js/css====================begin
Yii::app()->clientScript->registerCssFile(Yii::app()->baseUrl . "/js/syntaxhighlighter/styles/shCoreDefault.css");
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/shCore.js');
Yii::app()->clientScript->registerScriptFile(Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/shAutoloader.js');
?>
<script>
$(document).ready(function() {
function path()
{
var args = arguments, result = [];
for(var i = 0; i < args.length; i++)
result.push(args[i].replace('@', '<?php echo Yii::app()->baseUrl . '/js/syntaxhighlighter/scripts/'; ?>'));
return result;
};

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();
});
</script>
<?php // syntaxhighlighter代码高亮显示需要加载的js/css====================end ?>

然后，修改kindeditor中plugins/code/code.js：

修改此处的作用是将kindeditor默认使用的prettry插件css类，修改为syntaxhighlighter插件css类：brush:，同时给出配置参数toolbar：右上角的工具栏，auto-links：自动修改链接

cls = 'brush:' + type + '; toolbar: false; auto-links: FALSE;';
var html = '<pre class="' + cls + '">\n' + K.escape(code) + '</pre>';

html = ['<div style="padding:10px 20px;">',
'<div class="ke-dialog-row">',
'<select class="ke-code-type">',
'<option value="">[选择编程语言]</option>',
'<option value="java">Java</option>',
'<option value="cpp">C/C++/Objective-C</option>',
'<option value="c#">C#</option>',
'<option value="js">JavaScript</option>',
'<option value="php">PHP</option>',
'<option value="perl">Perl</option>',
'<option value="python">Python</option>',
'<option value="ruby">Ruby</option>',
'<option value="html">HTML</option>',
'<option value="xml">XML</option>',
'<option value="css">CSS</option>',
'<option value="vb">ASP/Basic</option>',
'<option value="pascal">Delphi/Pascal</option>',
'<option value="scala">Scala</option>',
'<option value="groovy">Groovy</option>',
'<option value="lua">Lua</option>',
'<option value="sql">SQL</option>',
'<option value="cpp">Google Go</option>',
'<option value="as3">Flash/ActionScript/Flex</option>',
'<option value="xml">WPF/SliverLight</option>',
'<option value="shell">Shell/批处理</option>',
'</select>',
'</div>',
'<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',
'</div>'].join(''),

如果想在填写表单的时候有代码样式，需要在创建表单的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;}

好了，自此语法高亮已经满足基本使用，效果不错，至于kindeditor如果整合进yii框架，下一篇文章会做详细介绍。