用Jquery SyntaxHighlighter plugin構(gòu)建IT博客
這個標(biāo)題顯然取得不夠準(zhǔn)確，因為IT博客主人不一定會在博文中發(fā)一些代碼片段，而SyntaxHighlighter是程序代碼高亮著色或格式化工具，以下教程要講的是如何用SyntaxHighlighter工具美化自己博客文章包含的程序代碼片段風(fēng)格，這與CSDN博客用的技術(shù)是完全一樣的。
近幾天發(fā)現(xiàn)CSDN博客代碼格式化功能失效了。剛好發(fā)現(xiàn)官方博客一個公告說系統(tǒng)壓力過大，暫時關(guān)閉了一些功能，詳情：http://blog.csdn.net/blogdevteam/archive/2009/05/20/4204311.aspx，但是想想代碼著色功能與服務(wù)器壓力是沒有關(guān)系的，代碼著色用的是JS查找替換方法，這些腳本是在客戶端瀏覽器執(zhí)行的。難道又是近來大家反映博客訪問慢，用戶體驗不好，所以把客戶端的壓力也暫時減輕了，具體問題還是不得而知。
出現(xiàn)這樣的問題，讓博客的代碼片段看起來很難看，我試著去看看問題可能出現(xiàn)在那里，我查看了博客文章正文網(wǎng)頁的HTML源代碼，發(fā)現(xiàn)負(fù)責(zé)代碼著色的腳本是有包含進來的，請看下圖：
代碼有包含進來為什么沒有效果呢，難道腳本有錯誤？于是我又打開Firefox瀏覽器錯誤控制臺，但又沒有發(fā)現(xiàn)有腳本錯誤報告，難道腳本錯誤被捕捉（try{…}catch{…}）但沒有處理。
最后決定把CSDN博客的代碼格式功能搬到本地試驗一下。于是我上網(wǎng)下載了幾乎與CSDN博客同步的相關(guān)代碼文件，當(dāng)然不是直接從CSDN博客下載，而是在各官方網(wǎng)下的，這些文件包含下面這些：
它們的作用與下載地址如下：
(1)Jquery
一個相當(dāng)知名而輕量的JavaScript框架，在好些大網(wǎng)站的源碼中都可以發(fā)現(xiàn)它的身影，因為Jquery syntaxHighlighter plugin是基于它的，所以我們需要它。
(2)Syntaxhighlighter package
負(fù)責(zé)格式代碼的JS包，一般來說直接用它也是可以實現(xiàn)代碼格式化功能的。但由于直接使用較為不方便，所以有了下面那個插件。
(3)Jquery syntaxHighlighter plugin
一個用于簡化Syntaxhighlighter部署的Jquery插件，插件文檔說用一行代碼就可以讓syntaxHighlighter正常工作。
準(zhǔn)備齊了上面這些文件，也對各個文件有了相關(guān)了解，現(xiàn)在我們馬上來做一個Demo。在上面提到的相關(guān)文件所在文件夾，建立一個Demo.html文件，然后包含下面代碼：
<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>
在瀏覽器中打開它就可以看到如下效果：
最后對上面代碼作個簡單解釋。
其中如下代碼是配置代碼格式的默認(rèn)樣式等參數(shù)的，其中CSDN博客是寫在http://hi.images.csdn.net/js/blog/SyntaxHighlighter/highlighter.js文件中的：
//$.SyntaxHighlighter('./SyntaxHighlighter/');
var option={
dir:'./SyntaxHighlighter/',
name:'code',
showControls:true
};
$.SyntaxHighlighter(option);
});
看了上面教程，相信你如果要構(gòu)建自己的博客，這個博客常發(fā)些代碼，你應(yīng)該可以實現(xiàn)像CSDN或CNBLOGS的代碼著色功能了吧。
附加內(nèi)容：
CSDN博客代碼著色功能一直沒有好，自己也找不到原因，但總不能讓博客原有代碼片段變得那么難看啊，得想個辦法臨時解決一下。我的做法和思路是這樣的：
我們知道CSDN博客是完美支持CSS和JavaScript的，而且默認(rèn)有包含了Jquery框架。既然這樣，我保證原有文章一點代碼不用動（改動原文麻煩，況且說不準(zhǔn)那天CSDN博客代碼著色功能又好了，到時又要改回來），所以我只是在博客配置的自定義樣式與公告那里寫入以下代碼。
自定義CSS樣式：
公告：
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();
});
實現(xiàn)思路是用CSS給代碼框一個固定寬度，并讓它看起像一個灰色的盒子。
而腳本功能是分析出代碼框有多少行，然后重設(shè)原有代碼<textarea cols="50" rows="15" name="code" class="javascript">中的rows值（這里的算行方法當(dāng)然不是完全準(zhǔn)確的，比如長行出現(xiàn)時，是算不準(zhǔn)的，不求完美，但求實用，哈）。注意到我腳本中的注釋部分嗎，這是我最先償試的另外一種方法，就是取出代碼文本框的內(nèi)容，然后轉(zhuǎn)交到一個新生成的<div class="codebox">中顯示，最后用$(this).remove()移除原有文本框，但發(fā)現(xiàn)長行代碼顯示不完整。
實現(xiàn)效果如下圖：
是不是與博客園的代碼片段樣式差不多，只是我這里沒有代碼關(guān)鍵詞高亮效果。注意，上面你看到的灰色盒子還是原來的多行文本框，你可以試一下將光標(biāo)焦點置于里面，你將可以改動里面的內(nèi)容（這是文本框的一個特征），而且你按ctrl+a全選組合鍵也只會選中當(dāng)前框內(nèi)的代碼，而不會全選到整個網(wǎng)頁。暫時就這樣用著先了，哈。
源代碼下載：SyntaxHighlighter Demo.rar
出處：http://webflash.cnblogs.com
本文版權(quán)歸作者和博客園共有，歡迎轉(zhuǎn)載，但未經(jīng)作者同意必須保留此段聲明，且在文章頁面明顯位置給出原文連接，否則保留追究法律責(zé)任的權(quán)利。
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點擊進入論壇
