Coffee Space


Listen:

Code Highlight

NOTE: Depreciated code.

Below is the source for the syntax highlighting for this site, which I wrote in a night as a lightweight system for highlighting bits of code. It’s by no means complete, but I’ve designed it in such a way that it should be complete enough.

Highlights

Code

0001 // Code-Highlight.js
0002 //
0003 // This javascript adds simple syntax highlighting, boasting a small file size,
0004 // simple therefore compatible, backwards compatible for systems not running
0005 // javascript and clean formatting. Code also offers the ability to print in a
0006 // clean and printer friendly fashion.
0007 //
0008 // Version 1.0.1
0009 // Written By B[]Array
0010 //
0011 // License:
0012 //   No warranty, free to use. It would be kind if you said that you have used
0013 //   this code. Use commercially if you wish, after all with any luck this will
0014 //   help make the internet a cleaner place.
0015 
0016 function codehighlight(){
0017   var outerright = '</pre>';
0018   var fontstart = '<b><font color="';
0019   var fontend = '</font></b>';
0020   
0021   var red = "red";
0022   var maroon = "maroon";
0023   var olive = "olive";
0024   var teal = "teal";
0025   var grey = "darkslategray";
0026   
0027   var symbolpairs = [
0028     ["[", '">['],
0029     ["]", '">]'],
0030     ["{", '">{'],
0031     ["}", '">}'],
0032     ["(", '">('],
0033     [")", '">)']
0034   ];
0035   
0036   var symbolmath = [
0037     ["+", '">+'],
0038     ["-", '">-'],
0039     ["*", '">*'],
0040     ["^", '">^'],
0041     ["//", '">//']
0042   ];
0043   
0044   var symbolother = [
0045     [".", '">.'],
0046     [",", '">,'],
0047     ["?", '">?'],
0048     ["!", '">!'],
0049     ["£", '">£'],
0050     ["$", '">$'],
0051     ["%", '">%'],
0052     ["@", '">@'],
0053     ["~", '">~'],
0054     ["|", '">|'],
0055     ["#", '">#'],
0056     [":", '">:']
0057   ];
0058   
0059   var number = [
0060     ["0", '">0'],
0061     ["1", '">1'],
0062     ["2", '">2'],
0063     ["3", '">3'],
0064     ["4", '">4'],
0065     ["5", '">5'],
0066     ["6", '">6'],
0067     ["7", '">7'],
0068     ["8", '">8'],
0069     ["9", '">9']
0070   ];
0071   
0072   var codeblocks = document.getElementsByClassName("code");
0073   for(var i = 0; i < codeblocks.length; i++){
0074     var id = 'code' + i;
0075     var outerleft = '<input id="printcode" type="button" value="Print Code" onclick="printcode(\'' + id + '\');" /><pre class="code" id="' + id + '">';
0076     
0077     var newblock = document.createElement("p");
0078     newblock.innerHTML = codeblocks[i].innerHTML;
0079     
0080     for(var z = 0; z < symbolpairs.length; z++)
0081       newblock.innerHTML = newblock.innerHTML.split(symbolpairs[z][0]).join(fontstart + teal + symbolpairs[z][1] + fontend);
0082     
0083     for(var z = 0; z < symbolmath.length; z++)
0084       newblock.innerHTML = newblock.innerHTML.split(symbolmath[z][0]).join(fontstart + maroon + symbolmath[z][1] + fontend);
0085     
0086     for(var z = 0; z < symbolother.length; z++)
0087       newblock.innerHTML = newblock.innerHTML.split(symbolother[z][0]).join(fontstart + red + symbolother[z][1] + fontend);
0088     
0089     for(var z = 0; z < number.length; z++)
0090       newblock.innerHTML = newblock.innerHTML.split(number[z][0]).join(fontstart + olive + number[z][1] + fontend);
0091     
0092     newblock.innerHTML = outerleft + newblock.innerHTML + outerright;
0093     codeblocks[i].parentNode.replaceChild(newblock, codeblocks[i]);
0094   }
0095 }
0096 
0097 function printcode(id){
0098   var win = window.open('', '_blank');
0099   win.document.write('<html><head></head><body>');
0100   win.document.write('<h1>' + document.title + '</h1>');
0101   win.document.write('<h2>' + document.getElementsByTagName("h1")[0].innerHTML + '</h2>');
0102   
0103   var codeblock = document.getElementById(id);
0104   win.document.write('<pre style="white-space: pre-wrap; white-space: -moz-pre-wrap; white-space: -pre-wrap; white-space: -o-pre-wrap; word-wrap: break-word;">' + codeblock.innerHTML + '</pre>');
0105   
0106   win.document.write('</body></html>');
0107   
0108   // Special code for IE >= 10
0109   win.document.close();
0110   win.focus();
0111   
0112   win.print();
0113   win.close();
0114 }

Use in Page

First things first, you will need to include the javascript file by placing the following into your code:

0115 <script type="text/javascript" src="code-highlight.js"></script>

Next, you must allow the code to run by calling it’s constructor codehighlight();.

NOTE: I do know that it can be run from the onload in the body tag, but I wish to leave it open for future scripts to be added as part of a larger modular system.

0116 ...
0117 <head>
0118   ...
0119   <script type="text/javascript">
0120     function main(){
0121       codehighlight();
0122     }
0123   </script>
0124 </head>
0125 <body onload="main();">
0126 ...
0127 </body>
0128 ...

Now the code will parse the html on the page, next to add you code sections:

0129 <pre class="code">
0130   <!-- Your code here -->
0131 </pre>

Further Experimentation

Further experimenting revealed that it’s much more efficient to use the what appears to be much more bloated multiple passes algorithm on the code than doing a character by character search once. I suspect that this is because the browser actually uses a much lighter search and replace algorithm than in the emulated environment of javascript. It’s probably the difference between C++ search and replace and a much higher level language. The effects on this page were anything up to 20 seconds page lockup compared to the almost instant viewing of this page with the current code.

If anybody has any advice on how to speed up or simplify the current passes without loosing too much if anything of the syntax I would be happy to listen. I find it somewhat annoying that it isn’t faster, but still, it isn’t bad for a browser based language and currently the speed is good on most devices, even old ones.