一直琢磨着讲博客原来的coolcode高亮插件换成SyntaxHighlighter高亮, 心动不如行动, 终于花了几小时时间完成了这项琐碎的工作.
SyntaxHighlighter的实用与强大, 就不用我说了. 其实coolcode也是款很不错的高亮插件, 但书写时相对繁琐一些.
关于安装这个插件, Google一下, 会有文章介绍, 我所尝试并有效的方法只有直接引入JS及CSS文件. 一开始我也是直接下了个zip包, 直接添加新插件, 失败. 打开包一看, 里面根本没有相关的Pph配置文件. 还以为下错了文件. 然后在ZH CEXO童鞋的提醒下, 看了下其中的test页面, 原来它是纯JS+CSS实现的. 好吧, 麻烦一点, 直接加载文件吧. 不要为test文档中大片的JS调用吓倒, 除了一个核心shCore.js, 其他的全根据自己实际使用情况调用.有一点, 千万别忘了在外链文件后, 执行一下SyntaxHighlighter.all(). 文章最后我会贴上我所使用的CSS及JS.
本地测试, 新的语法高亮成功. 接下来就是将以前的高亮方式替换成新的. 一篇篇文章修改? 当然可以, 但是会死人的. 最好的方法当然是直接批量替换数据库. 安全起见, 先用phpMyAdmin导出(我的是虚拟主机, SQL Front连不上, 很郁闷~)文章表(我的是i_posts), 然后在本地用SQL Front执行批量更新替换(也可以直接在phpMyAdmin中执行). 下面是我使用的SQL方法:
update i_posts set post_content=REPLACE(post_content,'coolcode lang="javascript" linenum="off"','pre class="brush: js;"');
注意,上面的语句一定要根据实际仔细写完整, 否则替换错了是不能撤消的..
但数据库也不是万能的, 批量替换只能替换相同的部分, 有些地方写的时候难免会换个顺序, 多个空格之类的, 所以, 还是得一页页的翻翻, 把不正确的更正过来.
所有数据更新完毕, 本地测试无误, 导入. 一个新的语法高亮就完成了.
使用方法, 暂不详述, 请参考插件包中的演示文档或前往SyntaxHighlighter高亮查看.
最后, 如果你在本站浏览时发现比较奇怪的代码错位或者其他bug, 那极有可能是数据替换时出的岔子, 请及时转告我, 先谢过~
下面是我的调用的CSS及JS文件(PHP的gzip压缩方法,请参考: http://mrthink.net/ue-php-gzip-function/):
CSS.php
include('syntax_css/shCore.css');//核心CSS
include('syntax_css/shThemeDefault.css');//模板CSS
JS.php
include('syntax_js/shCore.js');//核心文件
include('syntax_js/shBrushJScript.js');//JS高亮
include('syntax_js/shBrushCSS.js');//CSS高亮
include('syntax_js/shBrushPHP.js');//PHP高亮
include('syntax_js/shBrushXml.js');//HTML类(含xml)高亮
最后的JS
SyntaxHighlighter.config.clipboardSwf = 'syntax_js/clipboard.swf';//这个是鼠标划过复制小图标的flash SyntaxHighlighter.all();
唔,虽然有插件 SyntaxHighlighter Evolved,不过我也有想手工调用一下。。
毕竟这个插件用了不下几十个 !important 的css,修改效果的时候真蛋疼啊 o(* ̄▽ ̄*)ゞ。
Mr.Think 回复:
十二月 25th, 2010 at 12:00
@小邪, 哈 样式改动不多, 关键是以前的高亮方式修改比较蛋疼..