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

2019独角兽企业重金招聘Python工程师标准>>>

首先需要在页面中引入所需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框架，下一篇文章会做详细介绍。

转载于:https://my.oschina.net/liuxiaobo/blog/200863