Syntax Highlighting
[Edit: The slowdown caused by parsing the main chunk of javascript function was getting out of hand so i temporarily removed formatting from this block. It will now look terribly ugly but i plan to update the formatting mechanism at the weekend to allow collapsed text to be formatted on expansion rather than page-load.
I was recently asked about the code syntax highlighting on my blog. I can't take any credit for it (except for the little time it took me to mash somebody else's code into a single page. The code itself is courtesy of Alex Gorbatchev and is available in it's entirety at
http://code.google.com/p/syntaxhighlighter/ under the terms o the GNU Lesser General Public License.
Please beware (if you haven't noticed already) that highlighting big blocks of code requires a relatively large amount of client-side processing, thus slowing the page when loading and causing a little havoc. This, alas, is the nature of the beast. This syntax highlighter allows for a collapsed mode where textareas can be collapsed, thus making things a little neater. Perhaps a nice addition would be deferring the syntax highlighting for a particular region based on whether it is hidden or not....
A syntax highlighter written in Javascript, it allows keywords to be highlighted by creating a textarea, specifying its CSS class (based on the language you wish to highlight) and popping your code into said textarea as follows:
The zip archive download from the above site includes multiple .js and .css files. Since blogger (and most other blogs) only allow for a single HTML page, it was necessary to mash the code from all of these source files together and insert them into this solitary page. I did so as follows (using version 1.5.1):
- Compiled all of the Javascript Functions into one script region, inserted into the <HEAD> of my document.
- Compiled all of the CSS attributes etc. into a single style region, also added to the <HEAD> of my document
- Created another Javascript area at the very bottom of my document right before the </BODY> tag to call the relevant functions and begin syntax highlighting.
The result is, as can be seen below, some beautifully highlighted code. Thanks to Alex Gorbatchev for his wonderful work.
- Javascript Functions
- CSS Attributes etc.
- Call Relevant Functions
Comments