文档章节

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

wedv
 wedv
发布于 2014/02/18 15:56
字数 781
阅读 787
收藏 4

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


本文转载自:http://www.liuxos.com/index.php?r=post/view&id=6&title=kindeditor+%2B+syntaxhighlighter+%E4%BD%BF...

wedv
粉丝 8
博文 11
码字总数 4487
作品 0
海淀
程序员
私信 提问
kindeditor4.x整合SyntaxHighlighter代码高亮

kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,不过因为SyntaxHighlighter的应用...

度外网络
2012/08/26
2.3K
4
syntaxhighlighter怎么动态加载代码?

昨天开始研究Kindeditor跟syntaxhighlighter的集成使用,直到目前为止,未能成功,望高手帮忙解决下,先谢了。 这样的,看到开源中国用了kindeditor编辑器,并且集成了syntaxhighlighter代码...

Photon
2010/12/16
1K
7
怎么选择wordpress 编辑器

最近wordpress刚建立起来,发表文章的时候顿感压力山大,默认编辑器TinyMCE,功能少的可怜啊。下面我就把我这几天找到的编辑器做一个统计好了,顺便说下这几天的感受。 TinyMCE: 不过网友们已...

ShareYkuaile
2014/12/18
6K
1
Kindeditor代码实现代码插入和修改

除了CK,Kindeditor还是比较好用的在线编辑器,不过kd有个严重的问题就是插入代码之后再修改会有转码问题,最近研究了下之后,找到了很好的解决方案,分享如下: 1、在编辑器插入上传的时候进...

tidezyc
2012/05/01
3.1K
1
请教红薯老大一个关于博客编辑器的问题

小弟正在鼓捣一个个人博客, 想实现一下咱们空间中博客编辑器的部分效果, 目前遇到了以下两个问题... 问题1: kindeditor如何和syntaxhighlighter结合, 实现的代码即时预览... 问题2: 如何管理...

宋超
2011/03/16
505
2

没有更多内容

加载失败,请刷新页面

加载更多

【JVM学习】2.Java虚拟机运行时数据区

来源: 公众号: 猿人谷 这里我们先说句题外话,相信大家在面试中经常被问到介绍Java内存模型,我在面试别人时也会经常问这个问题。但是,往往都会令我比较尴尬,我还话音未落,面试者就会“...

物种起源-达尔文
17分钟前
2
0
dart datetime

var date = DateTime.now().toUtc(); //格式化输出 String timestamp = "${date.year.toString()}-${date.month.toString().padLeft(2, '0')}-${date.day.toString().padLeft(2, ......

zdglf
55分钟前
20
0
如何在Linux中复制文档

在办公室里复印文档过去需要专门的员工与机器。如今,复制是电脑用户无需多加思考的任务。在电脑里复制数据是如此微不足道的事,以致于你还没有意识到复制就发生了,例如当拖动文档到外部硬盘...

老孟的Linux私房菜
今天
47
0
SpringBoot 集成MongoDB

一、MongoDB 简介 MongoDB 如今是最流行的 NoSQL 数据库,被广泛应用于各行各业中,很多创业公司数据库选型就直接使用了 MongoDB,但对于大部分公司,使用 MongoDB 的场景是做大规模数据查询...

zw965
今天
49
0
使用 Envoy 和 AdGuard Home 阻挡烦人的广告

> 原文链接:使用 Envoy 和 AdGuard Home 阻挡烦人的广告 通常我们使用网络时,宽带运营商会为我们分配一个 DNS 服务器。这个 DNS 通常是最快的,距离最近的服务器,但会有很多问题,比如: ...

米开朗基杨
今天
48
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部