替换KindEditor代码高亮为UEditor高亮样式

在Typecho的坛子里下载了hizhengfu 的KindEditor插件，但是KE自带的代码高亮着实难看，对我这个码农来说写博客又离不了代码高亮。就试着把UEditor的高亮样式移植到了KE里。

具体操作方式如下：

从UEditor官网下载UEditor代码，我下载了最新的完整版源码。

解压找到 \third-party\SyntaxHighlighter\ 路径下的两个文件 shCore.js 和 shCoreDefault.css 拷贝到KindEditor for Typecho插件里的\KindEditor\editor\plugins\code\目录，虽说放到哪里都可以，但为了结构美观还是放在该放的地方吧。

现在修改插件里KindEditor文件夹下的Plugin.php文件

在public static function render($post) 上边加上如下一段代码

    
    /**
     *输出到前台footer
     */
    public static function footer()
    {
        $pluginName = self::$pluginName;
        $editor_code_css_url=Typecho_Common::url("$pluginName/editor/plugins/code/shCoreDefault.css",Helper::options()->pluginUrl);
        $editor_code_js_url=Typecho_Common::url("$pluginName/editor/plugins/code/shCore.js",Helper::options()->pluginUrl);    
        echo <<<EOF
        <link rel="stylesheet" type="text/css" href="{$editor_code_css_url}" />  
        <script type="text/javascript" charset="utf-8" src="{$editor_code_js_url}"></script>              
        <script type="text/javascript">
            SyntaxHighlighter.highlight();
        </script>
EOF;
    }

小贴士：方法结束的EOF;前边不要有空格或Tab哦，不然会报错的

不知道这段代码贴到哪儿?好吧，下边是完整的，以最后一个方法为参考

    /**
     *输出到前台footer
     */
    public static function footer()
    {
        $pluginName = self::$pluginName;
        $editor_code_css_url=Typecho_Common::url("$pluginName/editor/plugins/code/shCoreDefault.css",Helper::options()->pluginUrl);
        $editor_code_js_url=Typecho_Common::url("$pluginName/editor/plugins/code/shCore.js",Helper::options()->pluginUrl);    
        echo <<<EOF
        <link rel="stylesheet" type="text/css" href="{$editor_code_css_url}" />  
        <script type="text/javascript" charset="utf-8" src="{$editor_code_js_url}"></script>              
        <script type="text/javascript">
            SyntaxHighlighter.highlight();
        </script>
EOF;
    }

    /**
     * 插件实现方法
     *
     * @access public
     * @return void
     */
    public static function render($post)
    {
        $options = Helper::options();
        $config = $options->plugin(self::$pluginName);
        $pluginName = self::$pluginName;

        $editorTheme = $config->editorTheme;
        $editorLang = $config->editorLang;
        if (!$editorLang) {
            $editorLang = 'zh_CN';
        }
...

好，这个方法完成了，我们还要在上边的激活插件方法public static function activate里添加一句

Typecho_Plugin::factory('Widget_Archive')->footer = array(self::$pluginName . '_Plugin', 'footer');

这句是说把footer方法中输出的内容输出到前台footer挂载点的位置，正常情况下位于body结束标记前。

完整就是

    /**
     * 激活插件方法,如果激活失败,直接抛出异常
     *
     * @access public
     * @return void
     * @throws Typecho_Plugin_Exception
     */
    public static function activate()
    {
        Typecho_Plugin::factory('Widget_Archive')->footer = array(self::$pluginName . '_Plugin', 'footer');
        Typecho_Plugin::factory('admin/write-post.php')->richEditor = array(self::$pluginName . '_Plugin', 'render');
        Typecho_Plugin::factory('admin/write-page.php')->richEditor = array(self::$pluginName . '_Plugin', 'render');
        Helper::addAction('plugins-kind-upload', 'KindEditor_Upload');
    }

到这里我们就算基本完成了，迫不及待的去前台看看。尼玛，为什么我输的JS代码就有高亮显示，输的C#代码就不显示呢，芥末坑爹。

其实，这是因为KE和UE输出的代码的格式不同，我们还要在修改一个地方

回到刚才复制文件的地方\KindEditor\editor\plugins\code\文件夹下，看到一个code.js没有，用编辑器打开它。

找到第49行

html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) + '</pre> ';

改成

html = '<pre class="brush' + cls + ';toolbar:false;">\n' + K.escape(code) + '</pre> ';

然后找到第17行

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="rb">Ruby</option>',
        '<option value="java">Java</option>',
        '<option value="vb">ASP/VB</option>',
        '<option value="cpp">C/C++</option>',
        '<option value="cs">C#</option>',
        '<option value="xml">XML</option>',
        '<option value="bsh">Shell</option>',
        '<option value="">Other</option>',
        '</select>',
        '</div>',
        '<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',
        '</div>'].join(''),

把这一段替换成

			html = ['<div style="padding:10px 20px;">',
				'<div class="ke-dialog-row">',
				'<select class="ke-code-type">',
				'<option value="as3">ActionScript3</option>',
				'<option value="bash">Bash/Shell</option>',
				'<option value="cpp">C/C++</option>',
				'<option value="css">CSS</option>',
				'<option value="cf">CodeFunction</option>',
				'<option value="c#">C#</option>',
				'<option value="delphi">Delphi</option>',
				'<option value="diff">Diff</option>',
				'<option value="erlang">Erlang</option>',
				'<option value="groovy">Groovy</option>',
				'<option value="html">HTML</option>',
				'<option value="java">Java</option>',
				'<option value="jfx">JavaFx</option>',
				'<option value="js">JavaScript</option>',
				'<option value="pl">Perl</option>',
				'<option value="php">PHP</option>',
				'<option value="plain">Plain Text</option>',
				'<option value="ps">PowerShell</option>',
				'<option value="python">Python</option>',
				'<option value="ruby">Ruby</option>',
				'<option value="scala">Scala</option>',
				'<option value="sql">Sql</option>',
				'<option value="vb">ASP/VB</option>',
				'<option value="xml">XML</option>',
				'<option value="">Other</option>',
				'</select>',
				'</div>',
				'<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',
				'</div>'].join(''),

保存，打包成ZIP，用DEFE 的Upload Plugin插件上传到你的博客，后台启用，看看有没有变得好看一点呢。

看效果?看看这篇文章就看到效果啦

为了照顾冬天怕冻手的童鞋，特提供了懒人插件包

下载地址：Click Me GetCode:f4dj

I'm 大宝

替换KindEditor代码高亮为UEditor高亮样式

最新文章

最近回复

友情链接