这一篇我将介绍如何让kindeditor4.x整合SyntaxHighlighter代码高亮,因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件
上一篇“让kindeditor显示高亮代码”中已经说过,高亮代码主要用的是class,所以
第一步:首先修改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文件,即可看到对应的选项,此处提供一份已经修改后的代码,供参考
var lang = self.lang(name + '.'),
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="external nofollow" rel="stylesheet" type="text/css">
<link href="/Public/plugs/syntaxhighlighter/styles/shThemeDefault.css" rel="external nofollow" 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;}