用指令碼格式化部落格園上文章中的範例程式碼

按照網友提出的意見，指令碼代碼已經更新。詳情請查看 http://www.cnblogs.com/Kellin/archive/2007/09/20/900668.html。本文中的樣本也相應被更新了。

在部落格上寫文章，粘貼代碼的時候如何格式化好，是我經常碰到的一個問題。用部落格園提供的那些格式化工具倒是不錯，不過要做些更改的話就比較麻煩點。而且像我這樣比較喜歡直接編輯 HTML 的不是很喜歡使用這些工具。因為要使用這些工具，必須換到可視化編輯狀態。而再換回到 HTML 狀態的時候，原來格式化好的 HTML 可能就被編輯器給弄得亂七八糟了

所以最近乾脆自己想辦法用 javascript 寫了一個非常簡單的格式化代碼的工具。現在完成的功能僅僅是給代碼加行號而已，大家如果有興趣可以繼續完善這段程式哦！在粘貼代碼的時候，將所有的代碼放到 PRE 元素裡，因為在 PRE 元素裡面的內容是保持我們看到的狀態的，換行、空格、退格等等都會顯示出來，而不是像其他 HTML 元素那樣都給忽略了。現在的運行效果如下：

public class MyClass{ public int a; public int b; public MyClass(int a, int b){ this.a = a; this.b = b; }}

public class MyClass{ public int a; public int b; public MyClass(int a, int b){ this.a = a; this.b = b; }}

這個簡單的格式化工具還有一些其他重要的功能沒有完成，包括著色功能、按語言類型進行不同的格式化等等。如果有時間我會繼續完成這個功能。大家誰有興趣的話也可以接著往下寫啊，呵呵！
需要完成的功能包括：

• 著色功能：關鍵字的著色
• 著色功能：注釋的著色
• 著色功能：字串的著色等等
• 在 pre 元素上比較需要格式化的語言的類型，比如 type="C#", type="C++" 等等

要使用這個工具，需要做以下的設定：

• 將要粘貼的代碼放到 pre 元素中
• 設定 pre 元素的 class 屬性為 csharp_code： <pre class="csharp_code">。
  如果不想分析這個 pre 元素，可以添加 ignore 屬性，如： <pre class="csharp_code" ignore="true">
• 然後在頁面最下面添加下面這段 javascript 代碼：

  var func = function(){  var r1 = new RegExp("\x20", "ig");  var r2 = new RegExp("\x09", "ig");  var f1 = function(h){    h = h.replace(r1,'&nbsp;');    return h.replace(r2,'&nbsp;&nbsp;');  }  var f2 = function(node){    var h = node.innerHTML;    var s = "";    var pos = 0;    while(pos < h.length){      var lp = h.indexOf('<', pos);      if(lp<0){        s += f1( h.substr(pos) );        break;      }else{        s += f1( h.substring(pos,lp) );      }      var rp = h.indexOf('>', lp+1);      if(rp<0){        s += f1( h.substr(lp) );        break;      }else{        s += h.substring(lp,rp);        pos = rp;      }    }    return s;  }  function updatePreElement(p){    var m = f2(p);    var s = "";    var pos = 0;    var line = 0;    while(pos<m.length){      var n = m.indexOf("\n",pos);      s += '<div class="csharp_codeLine"><div class="csharp_lineNumber">' + (++line) + '</div>';      if(n>=0){        s += m.substring(pos,n);      }else{        s += m.substr(pos);        s += '</div>';        break;      }      s += '</div>';      pos = n+1;    }    p.innerHTML = s;  }  var nodes = document.getElementsByTagName("pre");  for(var i=0;i<nodes.length;i++){    var n = nodes[i];    var ignore = n.getAttribute("ignore");    if(ignore){      ignore = ignore.toLowerCase();    }    if(n.className && n.className.toLowerCase()=="csharp_code" && ignore!="true"){      updatePreElement(n);    }  }}func();

• 另外用到的一些 CSS 樣式：

  .csharp_code{  padding: 8px;  background-color: #e6e6e6;  white-space: pre;  overflow: hidden;}.csharp_code, .csharp_code UL{  font-family: 新宋體, Verdana, Tahoma;  font-size: 9pt;}.csharp_code div.csharp_codeLine{  margin: 0;  padding: 0;  color: #000;  display: block;  float: none;  height: 12pt !important;  white-space: nowrap;  overflow: hidden;}.csharp_code .csharp_lineNumber{  color: #2b91af;  border-color: #6ce26c;  border-style: solid;  border-width: 0px 2px 0px 0;  display: block;  float: left;  width: 20px;  height: 12pt !important;  text-align: right;  vertical-align: middle;  margin: 0 8px 0 0;  padding: 0 2px 0 0;}