用脚本格式化博客园上文章中的示例代码

按照网友提出的意见，脚本代码已经更新。详情请查看 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,' ');
      return h.replace(r2,'  ');
    }
    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;
  }