最简洁的技文语法着色代码(css+js)

效果预览:http://www.mobans.cn/net/289.html
这个效果原本是为PHPWIND 7.3 [code]区域改进的代码展示效果,该方法可以轻松应用于PW论坛



CSS:

1 .blockquote2{border: 1px solid; border-color: #c0c0c0 #ededed #ededed #c0c0c0;margin:4px;padding:0 0 0 2em;line-height:16px;overflow:hidden;background:#fff;}
2 .blockquote2 ol{margin:0 0 0 1.5em;padding:0;}
3 .blockquote2 ol li{border-left:1px solid #ccc;background:#f7f7f7;padding-left:10px;font-size:12px;font-family:宋体;list-style-type:decimal-leading-zero;padding-right:1em;}
4 .blockquote2 ol li:hover{background:#fff;color:#008ef1;}
5 .blockquote2 ol li{list-style-type:decimal;}HTML布局:
1 <div class="blockquote2" id="code1"><ol>
2 <li>        static public int func1()</li>
3 </ol></div>
javascript:

1 var mobans_lines = document.getElementsByTagName("ol");
2 for (var i=0;i<mobans_lines.length ;i++ ) {
3 var boyi_lis = mobans_lines[i].getElementsByTagName("li");
4 for (var j=0;j<boyi_lis.length ;j++ ) {
5 if(boyi_lis[j].innerHTML.indexOf("//") > -1)
6 boyi_lis[j].innerHTML = boyi_lis[j].innerHTML.replace(/(\/\/.+)$/g,"<font color=#008000>$1</font>");
7 else
8 boyi_lis[j].innerHTML = boyi_lis[j].innerHTML.replace(/(using|namespace|public|class|function|void|try|catch|finally|if |StringBuilder|string |int|private|enum|const|double|byte|base|this|null|new |true|false|#region|#endregion|static|IntPtr|uint|short|document|bool|var |\$\.)/g,"<font color=#0000FF>$1</font>");
9 }
10 }