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;}

原文鏈接：http://www.d8jd.com/art/55804.html