用Jquery SyntaxHighlighter plugin构建IT博客

这个标题显然取得不够准确，因为IT博客主人不一定会在博文中发一些代码片段，而SyntaxHighlighter是程序代码高亮着色或格式化工具，以下教程要讲的是如何用SyntaxHighlighter工具美化自己博客文章包含的程序代码片段风格，这与优快云博客用的技术是完全一样的。

近几天发现优快云博客代码格式化功能失效了。刚好发现官方博客一个公告说系统压力过大，暂时关闭了一些功能，详情：http://blog.youkuaiyun.com/blogdevteam/archive/2009/05/20/4204311.aspx，但是想想代码着色功能与服务器压力是没有关系的，代码着色用的是JS查找替换方法，这些脚本是在客户端浏览器执行的。难道又是近来大家反映博客访问慢，用户体验不好，所以把客户端的压力也暂时减轻了，具体问题还是不得而知。

出现这样的问题，让博客的代码片段看起来很难看，我试着去看看问题可能出现在那里，我查看了博客文章正文网页的HTML源代码，发现负责代码着色的脚本是有包含进来的，请看下图：

代码有包含进来为什么没有效果呢，难道脚本有错误？于是我又打开Firefox浏览器错误控制台，但又没有发现有脚本错误报告，难道脚本错误被捕捉（try{…}catch{…}）但没有处理。

最后决定把优快云博客的代码格式功能搬到本地试验一下。于是我上网下载了几乎与优快云博客同步的相关代码文件，当然不是直接从优快云博客下载，而是在各官方网下的，这些文件包含下面这些：

它们的作用与下载地址如下：

(1)Jquery

一个相当知名而轻量的JavaScript框架，在好些大网站的源码中都可以发现它的身影，因为Jquery syntaxHighlighter plugin是基于它的，所以我们需要它。

(2)Syntaxhighlighter package

负责格式代码的JS包，一般来说直接用它也是可以实现代码格式化功能的。但由于直接使用较为不方便，所以有了下面那个插件。

(3)Jquery syntaxHighlighter plugin

一个用于简化Syntaxhighlighter部署的Jquery插件，插件文档说用一行代码就可以让syntaxHighlighter正常工作。

准备齐了上面这些文件，也对各个文件有了相关了解，现在我们马上来做一个Demo。在上面提到的相关文件所在文件夹，建立一个Demo.html文件，然后包含下面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Jquery SyntaxHighlighter plugin demo</title> <script type="text/javascript" src="jquery.js" ></script> <script type="text/javascript" src="jquery_highlighter.js" ></script> <script type="text/javascript"><!-- $(document).ready(function(){ var option={ dir:'./SyntaxHighlighter/', name:'code', showControls:true }; $.SyntaxHighlighter(option); }); // --></script> </head> <body> <pre name="code" class="js"> Array.prototype.each=function(callback) { for (i=0;i<this.length;i++) { callback.call(this,this[i]); } } var arrayObject=["JavaScript","Prototype","Jquery"]; arrayObject.each(function(x){alert(x)}); </pre> <pre name="code" class="c#"> using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; using System.Collections.Generic; using System.Text; public partial class Work : System.Web.UI.Page { //code here... } </pre> </body> </html>

在浏览器中打开它就可以看到如下效果：

最后对上面代码作个简单解释。

其中如下代码是配置代码格式的默认样式等参数的，其中优快云博客是写在http://hi.images.youkuaiyun.com/js/blog/SyntaxHighlighter/highlighter.js文件中的：

$(document).ready(function(){ //$.SyntaxHighlighter('./SyntaxHighlighter/'); var option={ dir:'./SyntaxHighlighter/', name:'code', showControls:true }; $.SyntaxHighlighter(option); });

看了上面教程，相信你如果要构建自己的博客，这个博客常发些代码，你应该可以实现像优快云或CNBLOGS的代码着色功能了吧。

附加内容：

优快云博客代码着色功能一直没有好，自己也找不到原因，但总不能让博客原有代码片段变得那么难看啊，得想个办法临时解决一下。我的做法和思路是这样的：

我们知道优快云博客是完美支持CSS和JavaScript的，而且默认有包含了Jquery框架。既然这样，我保证原有文章一点代码不用动（改动原文麻烦，况且说不准那天优快云博客代码着色功能又好了，到时又要改回来），所以我只是在博客配置的自定义样式与公告那里写入以下代码。

自定义CSS样式：

.blogstory textarea,.blogstory .codebox {width:700px; background:#EEE; border:1px solid #8A8A8A; padding:5px 10px; font-size:13px; line-height:1.5em}

公告：

$("textarea[name='code']").each(function(i){ var lineNum=$(this).html().split('/n').length; $(this).attr('rows',lineNum); //$(this).after('<div class="codebox">'+$(this).html().replace(/ /g,' ').replace(/ /g,'　　').replace(//n/g,'<br>')+'</div>'); //$(this).remove(); });

实现思路是用CSS给代码框一个固定宽度，并让它看起像一个灰色的盒子。

而脚本功能是分析出代码框有多少行，然后重设原有代码<textarea cols="50" rows="15" name="code" class="javascript">中的rows值（这里的算行方法当然不是完全准确的，比如长行出现时，是算不准的，不求完美，但求实用，哈）。注意到我脚本中的注释部分吗，这是我最先偿试的另外一种方法，就是取出代码文本框的内容，然后转交到一个新生成的<div class="codebox">中显示，最后用$(this).remove()移除原有文本框，但发现长行代码显示不完整。

实现效果如下图：

是不是与博客园的代码片段样式差不多，只是我这里没有代码关键词高亮效果。注意，上面你看到的灰色盒子还是原来的多行文本框，你可以试一下将光标焦点置于里面，你将可以改动里面的内容（这是文本框的一个特征），而且你按ctrl+a全选组合键也只会选中当前框内的代码，而不会全选到整个网页。暂时就这样用着先了，哈。

源代码下载：SyntaxHighlighter Demo.rar