博客文本编辑器使用的是UEditor1.4.3,和Bootstrap还有点不兼容,代码高亮功能看起来好丑,这是UEditor默认的语法高亮:
本来想将就用的,可又遇到了代码太长自动换行时行号错乱的问题,于是看了下自带SyntaxHighlighter的版本,竟然是1.5.1的,而且js文件有160kb。官网SyntaxHighlighter最新版本已经更新到3.0.83了,于是准备给UEditor的SyntaxHighlighter升下级。
SynTaxHighlighter
首先下载SyntaxHighlighter最新版,解压。
将scripts目录下的js压缩成一个文件(注意:shCore.js这个核心文件要放在最前面),我这里压缩为shCore.min.js。
styles目录中的文件包含基本样式shCore.css,主题基本样式shCoreXX.css以及其对应主题样式shThemeXX.css,我把每个主题与基本样式压缩成一个主题样式shCoreXX.min.css,8个主题,这里生成了8个文件。
修改UEditor
将上面生成的9个文件复制到UEditor目录下third-party/SyntaxHighlighter/目录中,并修改UEditor目录下的ueditor.parse.js文件,增加语法高亮设置:
/*! * UEditor * version: ueditor * build: Thu May 29 2014 16:47:49 GMT+0800 (中国标准时间) */ (function(){ (function(){ UE = window.UE || {}; //语法高亮设置 UE.sh_config = { sh_js : "shCore.min.js", sh_theme : "Default" }; var isIE = !!window.ActiveXObject; //定义utils工具 var utils = {
并修改加载SyntaxHighlighter的文件名:
UE.parse.register('insertcode',function(utils){ var pres = this.root.getElementsByTagName('pre'); if(pres.length){ if(typeof XRegExp == "undefined"){ var jsurl,cssurl; if(this.rootPath !== undefined){ jsurl = utils.removeLastbs(this.rootPath) + '/third-party/SyntaxHighlighter/'+UE.sh_config.sh_js; cssurl = utils.removeLastbs(this.rootPath) + '/third-party/SyntaxHighlighter/shCore'+UE.sh_config.sh_theme+'.min.css'; }else{ jsurl = this.highlightJsUrl; cssurl = this.highlightCssUrl; }
然后就修改完成啦,再将文件压缩一下就可以了。
使用方法
依然保持UEditor原来的使用方法,编辑内容展示,增加了两个可选配置,语法解析文件和高亮主题:
<script> UE.sh_config.sh_js="shCore.min.js"; //语法解析文件 UE.sh_config.sh_theme="Default"; //语法高亮主题 uParse(".article-content",{rootPath: "/js/ueditor"}); </script>
一共有8中主题可选:Default,Django,Eclipse,Emacs,FadeToGrey,MDUltra,Midnight,RDark
下面附SyntaxHighlighter最新版本 v3.0.83以及我已经改写好的代码附件,如下:
源最新版本:源最新版本 访问密码 567d
改写版本:改写版本 访问密码 f409