Format the sample code in the blog post in a script

According to comments from netizens, the script code has been updated. View http://www.cnblogs.com/Kellin/archive/2007/09/20/900668.html for details. The examples in this article are also updated accordingly.

I often encounter a problem when I write articles on my blog and how to format and paste code. It is good to use the formatting tools provided by the blog Park, but it is more troublesome to make some changes. What's more, I prefer to directly edit HTML, rather than using these tools. To use these tools, you must change to the visual editing status. When the HTML status is changed, the HTML format may be messy by the editor.

So recently, I tried to write a very simple code formatting tool in javascript. Now the function is just to add a line number to the Code. If you are interested, you can continue to improve this program! When the code is pasted, all the code is put into the PRE element, because the content in the PRE element remains the state we see, and the line breaks, spaces, backspaces, and so on will be displayed, not all HTML elements are ignored. The running effect is as follows:

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; }}

This simple formatting tool has some other important functions not completed, including the coloring function, formatting by language type, and so on. If there is time, I will continue to complete this function. If anyone is interested, you can write it down!
Functions to be completed include:

• Coloring function: coloring of keywords
• Coloring function: annotation coloring
• Coloring function: coloring of strings, etc.
• Compare the types of languages to be formatted on the pre element, such as type = "C #", type = "C ++", etc.

To use this tool, you need to make the following settings:

• Put the code to be pasted into the pre element.
• Set the class attribute of the pre element to csharp_code: <pre class = "csharp_code">.
  If you do not want to analyze this pre element, you can add the ignore attribute, for example, <pre class = "csharp_code" ignore = "true">
• Then add the following javascript code at the bottom of the page:

  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();

• Other CSS styles used:

  . Csharp_code {padding: 8px; background-color: # e6e6e6; white-space: pre; overflow: hidden ;}. csharp_code ,. csharp_code UL {font-family: New, 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 ;}