最简洁的技文语法着色代码(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 > &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 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      }

 

转载于:https://www.cnblogs.com/dotnetshow/archive/2009/09/10/1563743.html