Study on syntax highlighter code

I am not very satisfied with the style after code restoration, so I did some research on syntax highlighter implemented by pure JS, and added some features according to my preferences.
I suddenly found that I liked the code highlight style in the comments here, so I checked it and found it was all defined... My efforts are in vain .. But it is still very rewarding...

1. First, let's take a look at the effect after writing. You can also refer to the following:
JS Code:
<Br/> <script language = "JavaScript"> <br/> <! -- <Br/>/* Regular Expression multi-row mode </P> <p> the multi-row mode must be specified, only one word at the end of the row to be matched by the regular expression <br/> */</P> <p> var DATA = "first second \ n thind fourth \ n th Sixth"; <br/> var recat =/(\ W +) $/g; <br/> var arrdata = data. match (recat); <br/> for (VAR I = 0; I <arrdata. length; I ++) <br/>{< br/> alert (arrdata [I]); <br/>}</P> <p>/* <br/> only one word Sixth is returned. Because line breaks block matching, only one word at the end of the row can be matched, <br/> Of course, you can also use the split () method to split strings into arrays, but you have to match each row separately. <Br/> in the past, I used to read a book but often read it in half. As a result, I used a lot of splits, in fact, it is very simple as the following <br/> example only requires the M parameter to perform multi-row matching. <Br/> */<br/> var DATA = "first second \ n thind fourth \ n th Sixth"; <br/> var recat =/(\ W +) $/GM; <br/> var arrdata = data. match (recat); <br/> for (VAR I = 0; I <arrdata. length; I ++) <br/>{< br/> alert (arrdata [I]); <br/>}</P> <p> // --> <br/> </SCRIPT> <br/>
C # code:
/// <Summary> <br/> // check the asset whether exists <br/> /// </Summary> <br/> // <temp_param name = "runspace"> </temp_param> <Param name = "runspace"> </param> <br/> // <returns> Ture: exists false: not exists </returns> <br/> Public bool checkassetexist (runspace) <br/>{< br/> try <br/> {<br/> // the command of get assets <br/> command cmd = new command ("get-asset "); <br/> // prepare the parameters <br /> If (! Readparameter (ref cmd, xpathgetasset) <br/>{< br/> return false; <br/>}< br/> // Execute Command and get the return value <br/> collection <psobject> psobjectlist = new collection <psobject> (); <br/> // Execute Command <br/> If (! Executecommand (ref runspace, CMD, ref psobjectlist) <br/>{< br/> return false; <br/>}< br/> // get the asset name to check <br/> xmlnode = xmldoc. selectsinglenode (xpathassetname); <br/> If (psobjectlist. any (n => N. members ["name"]. value. tostring (). toupper (). equals (xmlnode. innertext. toupper () <br/>{< br/> return true; <br/>}< br/> return false; <br/>}< br/> catch (exception e) <br/>{< br/> // log <br/> utility. prepareerrmsg (ref errormessage, e); <br/> log. writeline (log. logtype. error, errormessage); <br/> return false; <br/>}< br/> # endregion <br/>
2. Syntax highlighter
The following two statements are called: 1 <SCRIPT type = "text/JavaScript">
2 codehighlight. clipboardswf = 'scripts/clipboard.swf ';
3 codehighlight. highlighterall ('code', true, false );
4 </SCRIPT>

You can see that highlightall is highlighting all the code to be highlighted. Here, I have removed a parameter for displaying the number of columns.
The following is the code:

Codehighlight. highlighterall = function (tagname, _ 60, _ 61, _ 62, _ 64) {function findvalue (){...} function isoptionset (_ 67, _ 68 ){...} function getoptionvalue (_ 6a, _ 6B, _ 6c ){...} function findtagsbyname (_ 70, _ 71, _ 72 ){...} vaR _ 75 = []; // tag list (need to high light) VaR _ 76 = NULL; // codehighlight. brushesvar _ 77 ={}; // aliasesfindtagsbyname (_ 75, tagname, "pre"); findtagsbyname (_ 75, tagname, "textarea "); If (_ 75. length = 0) {return;} For (VaR _ 79 in codehighlight. brushes) {VaR _ 7A = codehighlight. brushes [_ 79]. aliases; If (_ 7A = NULL) {continue;} For (VAR I = 0; I <_ 7A. length; I ++) {_ 77 [_ 7A [I] = _ 79 ;}}for (VAR I = 0; I <_ 75. length; I ++) {VaR _ 7d = _ 75 [I]; VaR _ 7E = findvalue (_ 7d. attributes ["class"], _ 7d. classname, _ 7d. attributes ["language"], _ 7d. language); VaR _ 7f = ""; if (_ 7E = NULL) {continue ;} _ 7E = _ 7E. split (":"); _ 7f = _ 7E [0]. tolowercase (); If (_ 77 [_ 7f] = NULL) {continue;} _ 76 = new codehighlight. brushes [_ 77 [_ 7f] (); _ 7d. style. display = "NONE"; // check function arguments and set the currect settings_76.nogutter = (_ 60 = NULL )? Isoptionset ("nogutter", _ 7E ):! _ 60; _ 76. addcontrols = (_ 61 = NULL )?! Isoptionset ("nocontrols", _ 7E): _ 61; _ 76. Collapse = (_ 62 = NULL )? Isoptionset ("collapse", _ 7E): _ 62; _ 76. showcolumns = (_ 64 = NULL )? Isoptionset ("showcolumns", _ 7E): _ 64; If (_ 76. Style) {document. Write ("");} // _ 76. firstline = (_ 63 = NULL )? Parseint (getoptionvalue ("firstline", _ 7E, 1): _ 63; _ 76. highlight (_ 7d ["innerhtml"]); // highlight this new codehighlight. brushes [_ 77 [_ 7f] (); _ 76. source = _ 7d; _ 7d. parentnode. insertbefore (_ 76.div, _ 7D );}};

Then there is highlight. This method is cumbersome.

codeHighLight.Highlighter.prototype.Highlight = function(_4c) {function Trim(str) {return str.replace(/^\s*(.*?)[\s\n]*$/g, "$1");}function Chop(str) {return str.replace(/\n*$/, "").replace(/^\n*/, "");}function Unindent(str) {...}var _55 = _52.exec(_50[i]);if (_55 != null && _55.length > 0) {min = Math.min(_55[0].length, min);}}if (min > 0) {for (var i = 0; i < _50.length; i++) {_50[i] = _50[i].substr(min);}}return _50.join("\n");}function Copy(_57, _58, _59) {return _57.substr(_58, _59 - _58);}var pos = 0;if (_4c == null) {_4c = "";}this.originalCode = _4c;this.code = Chop(Unindent(_4c));this.div = this.CreateElement("DIV");this.bar = this.CreateElement("DIV");this.ol = this.CreateElement("OL");this.matches = new Array();this.div.className = "dp-highlighter";this.div.highlighter = this;this.bar.className = "bar";this.ol.start = this.firstLine;if (this.CssClass != null) {this.ol.className = this.CssClass;}if (this.collapse) {this.div.className += " collapsed";}if (this.noGutter) {this.div.className += " nogutter";}if (this.tabsToSpaces == true) {this.code = this.ProcessSmartTabs(this.code);}this.ProcessRegexList();if (this.matches.length == 0) {this.AddBit(this.code, null);this.SwitchToList(this.isJavaScript);this.div.appendChild(this.ol);return;}this.matches = this.matches.sort(codeHighLight.Highlighter.SortCallback);for (var i = 0; i < this.matches.length; i++) {if (this.IsInside(this.matches[i])) {this.matches[i] = null;}}for (var i = 0; i < this.matches.length; i++) {var _5d = this.matches[i];if (_5d == null || _5d.length == 0) {continue;}this.AddBit(Copy(this.code, pos, _5d.index), null);this.AddBit(_5d.value, _5d.css);pos = _5d.index + _5d.length;}this.AddBit(this.code.substr(pos), null);this.SwitchToList(this.isJavaScript);this.div.appendChild(this.bar);this.div.appendChild(this.ol);};

The tools toolbar used to create the DIV in the first line is completed in the switchtolist above. I added the parameter _ isjavascript, the purpose is to add a run code button switchtolist with codehighlight in the tools column if the code is Js. toolbar. create a call to create. The following is the modified method.

codeHighLight.Toolbar.Create = function(_8, _isJavaScript) {var div = document.createElement("div");div.classname = "tools";for (var i in codeHighLight.Toolbar.Commands) {var cmd = codeHighLight.Toolbar.Commands[i];if (cmd.check != null && !cmd.check(_8)) {continue;}if (cmd.label == "RunCode " && !_isJavaScript) {continue;}div.innerHTML += "" + cmd.label + "";}return div;}

At the same time, you must add the runcode part in codehighlight. toolbar. commands.

var newWin1 = window;var newWin = newWin1.open('', "_blank", '');newWin.document.open('text/html', 'replace');newWin.opener = nullvar testCode = _runCode.originalCode.replace(/</g, "");newWin.document.write(testCode);newWin.document.close();