kindeditor4整合SyntaxHighlighter，让代码亮起来

这一篇我将介绍如何让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="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;}

原文地址：https://www.cnblogs.com/top8/p/6207814.html