程序人生
Kindeditor集成语法高亮
作者:邵波涛    时间:2016-08-21 浏览量:253

1、下载SyntaxHighlighter,取里面的scipts和styles文件夹,为方便使用期间,我直接将两文件夹放在kindeditor根目录下的syn目录内;

附带说一下,注释一下shCoreDefault.css或者shCore.css中的代码,以防文字过长不换行。

.syntaxhighlighter .line {
  /*white-space: pre !important;*/

2、替换默认kindeditor的语法文件根目录的plugins\code\code.js

KindEditor.plugin('code', function(K) {
    var self = this, name = 'code';
    self.clickToolbar(name, function() {
        var lang = self.lang(name + '.'),
            html = ['<div style="padding:10px 20px;">',
                '<div class="ke-dialog-row">',
                '<select class="ke-code-type">',
                '<option value="js jscript javascript">JavaScript</option>',
                '<option value="xml xhtml xslt html">HTML</option>',
                '<option value="css">CSS</option>',
                '<option value="php">PHP</option>',
                '<option value="perl pl">Perl</option>',
                '<option value="py python">Python</option>',
                '<option value="rails ror ruby">Ruby</option>',
                '<option value="java">Java</option>',
                '<option value="vb vbnet">ASP/VB</option>',
                '<option value="cpp c">C/C++</option>',
                '<option value="c-sharp csharp">C#</option>',
                '<option value="xml xhtml xslt html">XML</option>',
                '<option value="bash shell">Shell</option>',
                '<option value="">Other</option>',
                '</select>',
                '</div>',
                '<textarea class="ke-textarea" style="width:408px;height:260px;"></textarea>',
                '</div>'].join(''),
            dialog = self.createDialog({
                name : name,
                width : 450,
                title : self.lang(name),
                body : html,
                yesBtn : {
                    name : self.lang('yes'),
                    click : function(e) {
                        var type = K('.ke-code-type', dialog.div).val(),
                            code = textarea.val(),
                            cls = type === '' ? '' :  type,
                            html = '<pre class="brush:' + cls + '">\n' + K.escape(code) + '</pre> ';
                        if (K.trim(code) === '') {
                            alert(lang.pleaseInput);
                            textarea[0].focus();
                            return;
                        }
                        self.insertHtml(html).hideDialog().focus();
                    }
                }
            }),
            textarea = K('textarea', dialog.div);
        textarea[0].focus();
    });
});

3、在显示代码的页面添加SyntaxHighlighter的css和js文件

方法一:

{% block custom_css %}
 <link type="text/css" rel="stylesheet" href="{% static 'js/kindeditor-4.1.10/syn/styles/shCoreDefault.css' %}"/> 
{% endblock %}
{% block custom_js %}
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shCore.js' %}"></script>     
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushBash.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushCpp.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushCSharp.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushCss.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushDelphi.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushDiff.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushGroovy.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushJava.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushJScript.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushPhp.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushPlain.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushPython.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushRuby.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushScala.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushSql.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushVb.js' %}"></script>       
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushXml.js' %}"></script> 
 <script type="text/javascript">SyntaxHighlighter.all();</script>
{% endblock %}

方法二:

{% block custom_css %}
 <link type="text/css" rel="stylesheet" href="{% static 'js/kindeditor-4.1.10/syn/styles/shCoreDefault.css' %}"/> 
{% endblock %}
{% block custom_js %}
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shCore.js' %}"></script>     
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shAutoloader.js' %}"></script>  
    <script type="text/javascript">
$(document).ready(function(){
    SyntaxHighlighter.autoloader(
            ['js','jscript','javascript','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushJScript.js' %}'],
            ['xml','xhtml','xslt','html','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushXml.js' %}'],
            ['css','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushCss.js' %}'],
            ['php','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushPhp.js' %}'],
            ['per','pl','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushPerl.js' %}'],
            ['rails','ror','ruby','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushRuby.js' %}'],
            ['vb','vbnet','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushVb.js' %}'],
            ['cpp','c','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushCpp.js' %}'],
            ['c-sharp','csharp','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushCSharp.js' %}'],
            ['java','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushJava.js' %}'],
            ['bash','shell','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushBash.js' %}'],
            ['py','python','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushPython.js' %}']
        ); 
    SyntaxHighlighter.all(); 
})
             
    </script>
{% endblock %}

更懒的办法:单独在templates目录下写一个syn.html

{% load staticfiles %}
<link type="text/css" rel="stylesheet" href="{% static 'js/kindeditor-4.1.10/syn/styles/shCoreDefault.css' %}"/>
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shCore.js' %}"></script>     
    <script type="text/javascript" src="{% static 'js/kindeditor-4.1.10/syn/scripts/shAutoloader.js' %}"></script> 
<script type="text/javascript">
$(document).ready(function(){
    SyntaxHighlighter.autoloader(
            ['js','jscript','javascript','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushJScript.js' %}'],
            ['xml','xhtml','xslt','html','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushXml.js' %}'],
            ['css','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushCss.js' %}'],
            ['php','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushPhp.js' %}'],
            ['per','pl','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushPerl.js' %}'],
            ['rails','ror','ruby','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushRuby.js' %}'],
            ['vb','vbnet','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushVb.js' %}'],
            ['cpp','c','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushCpp.js' %}'],
            ['c-sharp','csharp','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushCSharp.js' %}'],
            ['java','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushJava.js' %}'],
            ['bash','shell','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushBash.js' %}'],
            ['py','python','{% static 'js/kindeditor-4.1.10/syn/scripts/shBrushPython.js' %}']
        ); 
    SyntaxHighlighter.all(); 
})
             
    </script>

然后在要显示的页面中

{% include  'syn.html' %}


发言请留称呼=>
本文留言
共有 1 条留言
  • 小扁舟
    2016-08-22
    老兄,怎么不见第3步中的代码?
    回复:您好,代码被过滤,已修复。
扫一扫,手机浏览网站
友情链接
申请链接