The syntax is much simpler than javascript,css, mainly dealing with annotations, strings, CSS style names, CSS style values, indenting, and wrapping, see code for details.
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>javascript implementation CSS code highlighting </title> <style type=" Text/css "> body{font-s ize:12px; line-height:1.8; font-family: ' Courier New ', Courier, monospace; } #area {width:320px; height:120px; } </style> </pead> <body> <textarea id= "area" > body{font-size:12px; line-height:1.8; } #area {width:320px; line-height:1.5; font-family: "Courier New", Courier, monospace; }/* ul{margin:0; padding:0; } */</textarea> <button id= "btn" >this ' S testing......</button> <div ' pre ' ></div> id= Cript type= "Text/javascript" > function $ (ID) {return document.getElementById (ID); }; $ ("btn"). OncLick=function () {var code=$ ("area"). Value; Processing Note: Note Replaced by _ number _ var Startidx=endindex=-1; var at=0; var commentlist=[]; while (true) {Startindex=code.indexof ("/*", at); if (startindex==-1) break; Endindex=code.indexof ("* *", startIndex); if (endindex==-1) break; at=endindex+2; Commentlist.push (code.substring (Startindex,at)); Code=code.replace (Commentlist[commentlist.length-1], "_" + (Commentlist.length-1) + "_"); }//String Code=code.replace (/([' "]). *\1/g,function (m) {return" <span style=\ "color: #060; \" > +m+ "</sp An> "}); CSS style value code=code.replace (/:(. +);/g,function (m,n) {return ": <span style=\" color: #00F; \ ">" +n+ "</span>;"}) ; CSS style name Code=code.replace (/[{}]/g,function (m) {if (m== "{") {return "{<span style=\" color: #0 06;\ ">"; }else{return "</SPAN>}"; } }); Comments Code=code.replace (/_ (\d+) _/g,function (m,n) {return "<span style=\" color: #999; \ "> +commentlist[n]+" </span > "}); Process \ t Code=code.replace (/^ (\t+)/gm,function (m) {return (new Array (m.length+1)). Join (" &nbs p; ");}; Process Space Code=code.replace (/^ (+)/gm, function (m) {return (new Array (M.length + 1)). Join (" "); }); Handle Line Code=code.replace (/\r?\n/g, "<br>"); $ ("Pre"). Innerhtml=code; } </script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
