Coffee Space 
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.
< and >, no other preparation for the code is required<pre> tags0001 // 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 }
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 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.