文档章节

kindeditor4.x整合SyntaxHighlighter代码高亮

小查查
 小查查
发布于 2012/08/26 13:21
字数 972
阅读 2316
收藏 7

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

1.第一步首先修改kindeditor代码高亮写入pre标签时的class类名:

打开/kindeditor4/plugins/code/code.js,找到类似于这样一行:

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

改为以下的内容:

//html = '<pre class="prettyprint' + cls + '">\n' + K.escape(code) +'</pre>';
//将代码高亮替换为SyntaxHighlighter插件需要的类名
html = '<pre class="brush:' + type + ';">\n' + K.escape(code) +'</pre>';
//此处为将原有写法注释,上一行为修改后的内容。

2.自定义页面中kindeditor中选择“插入代码”的图标,下拉菜单中的语言选择项:

同样是打开code.js文件,即可看到对应的选项,此处提供一份已经修改后的代码,供参考

'<select class="ke-code-type">',
	'<option value="java">Java</option>',
	'<option value="php">PHP</option>',
	'<option value="html">HTML</option>',
	'<option value="css">CSS</option>',
	'<option value="js">JavaScript</option>',
	'<option value="xml">XML</option>',
	'<option value="shell">Shell</option>',
	'<option value="sql">SQL</option>',
'</select>',

此处要注意,选项中,value对应的值要和SyntaxHighlighter的brush aliases对应,SyntaxHighlighter官方支持的brush aliases表如下:

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

3.kindeditor部分已经改造完毕,下面要在页面中加入SyntaxHighlighter,以支持对代码的高亮解析。

第一步:下载SyntaxHighlighter,目前官方的最新版本已经更新到3.0.83,官方下载地址为:http://alexgorbatchev.com/SyntaxHighlighter/download/download.php?sh_current

第二步:下载完毕后解压,我们发现script目录中有很对js文件,支持不同语言的解析。复制我们需要解析的语言的js文件,到我们项目中所对应的目录中。同时复制下面三个js文件:

shAutoloader.js //支持语音的自动加载

shCore.js

(shBrushJava.js等,根据自己的需要复制)

第三步:复制css样式文件,到我们我们的项目中:

shCore.css

shThemeDefault.css(也可以根据自己需要的风格复制对应的样式文件)

第四步:在页面中引入以上文件:

<link type="text/css" href="syntax/shCore.css" media="screen" />
<link type="text/css" href="syntax/shThemeDefault.css" media="screen"/>
<script type="text/javascript" src="syntax/shCore.js"></script>
<script type="text/javascript" src="syntax/shAutoloader.js"></script>

第五步:打开SyntaxHighlighter自动加载功能,开启自动解析

默认其实可以在页面中分别引入单独的需要的解析js文件,但是如果我们的页面需要支持10多种语言,那就需要引入10多个js文件,那样对网页的加载速度有很大的影响,所以我们通过SyntaxHighlighter最新提供的autoloader自动加载功能,加载仅需要解析的js文件。

参考代码如下:

<script type="text/javascript">
SyntaxHighlighter.autoloader(
	'java            /syntax/shBrushJava.js',
	'php            /syntax/shBrushPhp.js',
	'html xml            /syntax/shBrushXml.js',
	'css            /syntax/shBrushCss.js',
	'js jscript javascript            /syntax/shBrushJScript.js',
	'bash shell            /syntax/shBrushBash.js',
	'sql            /syntax/shBrushSql.js'
);
SyntaxHighlighter.all();
</script>

注意:

SyntaxHighlighter.autoloader()应该在doc都载入完以后再执行。
如果引用了jQuery,可以放$(document).ready()里,这样的话放在header里也没问题。
但如果原生js,要不放body的onload里,要不放页面最后,比如在、随便找个地方放,就能看到效果了

4.至此,我们的页面应该可以正常高亮显示代码了,不过当我们的代码多行是,在chrome浏览器下右边会显示滚动条,非常影响美观。

解决办法:

打开syntax-highlighter-compress中的样式文件shCoreDefault.css,找个空白处添加

.syntaxhighlighter table {margin: 1px 0 !important;}

改好之后,高亮代码右边栏滚动条就没有了,如果使用的其他风格,就修改其他风格对应的样式文件。

注:本文首发于 度外网络 官方博客: http://www.duwaiweb.com/blog/20120825_a68714ed-b065-4191-8a60-97a53bf234cd.html

本文转载自:http://www.duwaiweb.com/blog/20120825_a68714ed-b065-4191-8a60-97a53bf234cd.html

小查查

小查查

粉丝 1
博文 18
码字总数 1794
作品 0
徐汇
私信 提问
加载中

评论(4)

MangoCool
MangoCool
可以了,你要把code.js加载进来
MangoCool
MangoCool
我也是的,奇怪!
Saki
Saki
今天刚刚整合的 4.1.7版本的
其中按照楼主的
html = '<pre class="brush:' + type + ';">\n' + K.escape(code) +'</pre>';
改成了这个样子没有效果, 在提交之后还是会变成系统默认的 prettyprint lang-xxx 的形式
求解
changqing.yin
changqing.yin
饿死的冯绍峰
WordPress官方推荐的代码高亮插件

今天花了大半天的时间,终于选择好自己心仪的wordpress代码高亮插件,同时它也是wordpress官方推荐的代码语法高亮插件。在选择的过程中,我对比和试用了若干个代码高亮wordpress插件,包括有...

Surjur
2015/04/30
0
1
syntaxhighlighter 代码高亮加复制功能?

我在百度上面找的了, syntaxhighlighter 代码高亮但是我直接看, 开源中国, 的效果不错, 然后我直接下载了 开源中国的,他们的效果是 可以直接使用 复制功能, 感觉效果还不错, 但是我用...

韩庚庚
2013/12/02
0
0
kindeditor + syntaxhighlighter 使文章内的插入代码高亮显示

首先需要在页面中引入所需FE文件: 两个js和一个css文件是必须要引用的文件; shCore.js是syntaxhighlighter插件的基础代码; shAutoloader.js作用是syntaxhighlighter插件的代码高亮显示时自...

wedv
2014/02/18
0
0
介绍一款 TinyMCE 的语法着色插件

TinyMCE Syntaxhighlighter Plugin 是一个 TinyMCE 的语法高亮编辑器插件,使用 SyntaxHighlighter 语法着色引擎。

红薯
2010/10/17
37
0
6个 JavaScript 语法高亮插件

语法高亮对所有的代码编辑器来说是一个很重要的特性。当然它应该增加可读性,简化调试过程,给不同的代码语法设置不同的颜色。如果你的网站可以分享代码或者教程,你应该确保有一个好的语法高...

晨曦之光
2012/03/20
6.1K
8

没有更多内容

加载失败,请刷新页面

加载更多

lua字符串和时间戳相互转换

1. 时间戳转成格式化字符串 直接利用函数os.date()将时间戳转化成格式化字符串.```local timestamp = 1561636137;local strDate = os.date("%Y/%m/%d %H:%M:%S", timestamp)print("strD......

书香神
43分钟前
1
0
代码规范

代码格式化 安装vscode插件:Prettier - Code formatter 格式化配置:将下列配置写入到vscode的settings.json文件 (遵照代码格式化) "prettier.disableLanguages": ["vue"], "prettier.......

TreeZhou0511
今天
5
0
python实现人工神经网络的一个例子

人工神经网络已经有无数的开源框架,比如tensorflow,caffe等,可以直接用。但最近需要做一个小样例,把基本思想讲一讲,因此自己写了一个demo,以供参考。 下面直接上代码,代码中有注释,比...

propagator
今天
6
0
远程dubugger

1、在tomcat的bin下/data/project/XXX/apache-tomcat-8.5.23/bin 在catalina.bat文件中新增如下即可 JAVA_OPTS="-Xmx1024m -Xms1024m -agentlib:jdwp=transport=dt_socket,server=y,suspend......

一只小青蛙
今天
3
0
jemter 连接MySQL

jemter 连接MySQL 点击测试计划,测试计划最后”添加目录或jar包到ClassPath“,点击浏览,添加mysql-connector.jar mysql-connector.jar的下载地址: https://mvnrepository.com/artifact/my...

xiaobai1315
今天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部