Django个人博客开发（十）kindeditor整合SyntaxHighlighter代码高亮

您现在的位置是：网站首页>>编程开发编程开发

发布时间：2018-04-14 12:04:45分类：编程开发阅读：1231

概述

Kindeditor编辑器中有插入程序代码功能，但默认的代码显示效果并不理想，而SyntaxHighlighter工具能选择不同主题（Eclipse、Emacs等）根据不同语言代码显示不同风格样式。将kindeditor和SyntaxHighlighter整合在一起，完善kindeditor对代码的显示效果。

1、添加SyntaxHighlighter相关文件到项目中

1.1 下载SyntaxHighlighter包文件3.0.83版本（3.0.83是源文件可直接使用，GitHub上最新是4.0.1需要构建环境构建生成相应文件）

https://codeload.github.com/syntaxhighlighter/syntaxhighlighter/zip/3.0.83

1.2 解压SyntaxHighlighter 后只需要留下scripts和styles两个目录，然后将其放到项目的静态路径下

2、修改kindeditor的plugins/code/code.js代码，将它的“插入程序代码”功能与SyntaxHighlighter适配

SyntaxHighlighter是根据html中<pre class=”brush: alias”>插入的程序代码</pre>这一模式来使用代码高亮显示，其中alias为SyntaxHithlighter的brushes别名（参考：http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/）。

将code.js代码修改如下（注意注释说明部分）：

/*******************************************************************************
* KindEditor - WYSIWYG HTML Editor for Internet
* Copyright (C) 2006-2011 kindsoft.net
*
* @author Roddy <luolonghao@gmail.com>
* @site http://www.kindsoft.net/
* @licence http://www.kindsoft.net/license.php
*******************************************************************************/

// google code prettify: http://google-code-prettify.googlecode.com/
// http://google-code-prettify.googlecode.com/

KindEditor.plugin('code', function(K) {
	var self = this, name = 'code';
	self.clickToolbar(name, function() {
		var lang = self.lang(name + '.'),
			//修改value值用于适配SyntaxHighlighter的Brush Alias
			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="ruby">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="csharp">C#</option>',
				'<option value="xml">XML</option>',
				//'<option value="bsh">Shell</option>',
				'<option value="bash">Shell</option>',
				//'<option value="">Other</option>',
				//SyntaxHighlighter增加
				'<option value="sql">SQL</option>',
				'<option value="scala">Scala</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 === '' ? '' :  ' lang-' + type,
							//html = '<pre class=" linenums' + cls + '">\n' + K.escape(code) + '</pre> ';
							html = '<pre class="brush:' + type + '">\n' + K.escape(code) + '</pre> ';	//适配SyntaxHighlighter的模式
						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、修改blog/admin.py/Article数据模型中的Media

如上修改后发现

admin

后台

kindeditor

编辑器中的“插入程序代码”功能中仍旧是之前的选项，这是因为

kindeditor

使用的是

kindeditor-all-min.js

文件，而其中的插入程序代码并没有修改，因此需要在引用

kindeditor-all-min.js

之后引用

code.js

，将相同的部分进行覆盖，从而使用

SyntaxHeighlighter

适配。

# Article模型管理器
@admin.register(Article)
class ArticleAdmin(admin.ModelAdmin):
	……省略部分……
    # 将指定的静态素材应用于当前表单中
    class Media:
        css = {}
        js = (
            '/static/blog/js/kindeditor-4.1.11-zh-CN/kindeditor-all-min.js',
            '/static/blog/js/kindeditor-4.1.11-zh-CN/plugins/code/code.js',   # 覆盖kindeditor-all-min.js中的相同部分
            '/static/blog/js/kindeditor-4.1.11-zh-CN/config.js',
            '/static/blog/js/kindeditor-4.1.11-zh-CN/lang/zh-CN.js',
        )

、在前端文章详情页

blog/article.html

中引入

SyntaxHighlighter

的核心文件和主题文件

{% block css %}
    {{ block.super }} {#获取父模板的内容#}
    <link type="text/css" rel="stylesheet" href="{% static 'syntaxheighlighter/styles/shCore.css' %}"/>
    <link type="text/css" rel="stylesheet" href="{% static 'syntaxheighlighter/styles/shThemeDefault.css' %}"/>
{% endblock %}

{% block script %}
    {{ block.super }}
    <script type="text/javascript" src="{% static 'syntaxheighlighter/scripts/shCore.js' %}"></script>
{% endblock %}

、加入程序代码格式解析文件（

shBrush***.js

）

不同的程序语言其代码显示样式不同，因此SyntaxHeightlighter有很多的代码格式解析文件（文件名如shBrush***.js），通常一篇文章不需要同时引用所有的代码格式解析文件（同时引用所有的js文件影响网页加载速度），因此可以使用SyntaxHeighlighter提供的autoloader自动加载功能，加载仅需要解析的js文件。

5.1 在页面中引用SyntaxHeighlighter的shAutoloader.js文件

{% block script %}
    ……部分省略……
    <script type="text/javascript" src="{% static 'syntaxheighlighter/scripts/shAutoloader.js' %}"></script>
{% endblock %}

在页面末尾调用

SyntaxHighlighter.autoloader

自动加载功能和

SyntaxHighlighter.all()

方法

<script type="text/javascript">
SyntaxHighlighter.autoloader(
    "as3 actionscript3      {% static 'syntaxheighlighter/scripts/shBrushAS3.js' %}",
    "bash shell     {% static 'syntaxheighlighter/scripts/shBrushBash.js' %}",
    "cf coldfusion  {% static 'syntaxheighlighter/scripts/shBrushColdFusion.js' %}",
    "c-sharp csharp {% static 'syntaxheighlighter/scripts/shBrushCSharp.js' %}",
    "cpp c  {% static 'syntaxheighlighter/scripts/shBrushCpp.js' %}",
    "css    {% static 'syntaxheighlighter/scripts/shBrushCss.js' %}",
    "delphi pas pascal      {% static 'syntaxheighlighter/scripts/shBrushDelphi.js' %}",
    "diff patch     {% static 'syntaxheighlighter/scripts/shBrushDiff.js' %}",
    "erl erlang     {% static 'syntaxheighlighter/scripts/shBrushErlang.js' %}",
    "groovy {% static 'syntaxheighlighter/scripts/shBrushGroovy.js' %}",
    "js jscript javascript  {% static 'syntaxheighlighter/scripts/shBrushJScript.js' %}",
    "java   {% static 'syntaxheighlighter/scripts/shBrushJava.js' %}",
    "jfx javafx     {% static 'syntaxheighlighter/scripts/shBrushJavaFX.js' %}",
    "perl pl        {% static 'syntaxheighlighter/scripts/shBrushPerl.js' %}",
    "php    {% static 'syntaxheighlighter/scripts/shBrushPhp.js' %}",
    "plain text     {% static 'syntaxheighlighter/scripts/shBrushPlain.js' %}",
    "ps powershell  {% static 'syntaxheighlighter/scripts/shBrushPowerShell.js' %}",
    "py python      {% static 'syntaxheighlighter/scripts/shBrushPython.js' %}",
    "rails ror ruby {% static 'syntaxheighlighter/scripts/shBrushRuby.js' %}",
    "scala  {% static 'syntaxheighlighter/scripts/shBrushScala.js' %}",
    "sql    {% static 'syntaxheighlighter/scripts/shBrushSql.js' %}",
    "vb vbnet       {% static 'syntaxheighlighter/scripts/shBrushVb.js' %}",
    "xml xhtml xslt html xhtml      {% static 'syntaxheighlighter/scripts/shBrushXml.js' %}"
);
SyntaxHighlighter.all();
</script>
{% endblock %}

、查看效果

代码查看：https://github.com/xdao07/xdsite/tree/v0.0.7

代码下载：git clone --branch v0.0.7 https://github.com/xdao07/xdsite.git