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框架，下一篇文章會作詳細介紹。