DBMNG数据库管理与应用

书籍是全世界的营养品。生活里没有书籍,就好像没有阳光;智慧里没有书籍,就好像鸟儿没有翅膀。
当前位置:首页 > 经验分享 > WEB

kindeditor4整合SyntaxHighlighter代码高亮显示

kindeditor4.x代码高亮功能默认使用的是prettify插件,prettify是Google提供的一款源代码语法高亮着色器,它提供一种简单的形式来着色HTML页面上的程序代码,不过因为SyntaxHighlighter的应用非常广泛,所以将kindeditor默认的prettify替换为SyntaxHighlighter代码高亮插件。
1.第一步首先修改kindeditor代码高亮写入pre标签时的class类名:
打开/kindeditor4/plugins/code/code.js,找到类似于这样一行:
html = '

\n' + K.escape(code) + '';
改为以下的内容:
//html = '\n' + K.escape(code) + '';
//将代码高亮替换为SyntaxHighlighter插件需要的类名
html = '\n' + K.escape(code) + '';
//此处为将原有写法注释,上一行为修改后的内容。
//注意:去掉brush中的#,这里加#号是因为我的页面会去解析的问题。
2.自定义页面中kindeditor中选择“插入代码”的图标,下拉菜单中的语言选择项:
同样是打开code.js文件,即可看到对应的选项,此处提供一份已经修改后的代码,供参考

'', 'Java', 'PHP', 'HTML', 'CSS', 'JavaScript', 'XML', 'Shell', 'SQL', '',
此处要注意,选项中,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(也可以根据自己需要的风格复制对应的样式文件)

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

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

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

4.至此,我们的页面应该可以正常高亮显示代码了,不过当我们的代码多行是,在chrome浏览器下右边会显示滚动条,非常影响美观。
解决办法:
打开syntax-highlighter-compress中的样式文件shCoreDefault.css,找个空白处添加
.syntaxhighlighter table {margin: 1px 0 !important;}
改好之后,高亮代码右边栏滚动条就没有了,如果使用的其他风格,就修改其他风格对应的样式文件。

本站文章内容,部分来自于互联网,若侵犯了您的权益,请致邮件chuanghui423#sohu.com(请将#换为@)联系,我们会尽快核实后删除。
Copyright © 2006-2023 DBMNG.COM All Rights Reserved. Powered by DEVSOARTECH            豫ICP备11002312号-2

豫公网安备 41010502002439号