Automatic (coldfusion) code coloring on your blog

Posted by Paul Klinkenberg in CFML , jQuery + Javascript on April 17, 2009

color-coded text I received a question today, whether it was "possible to use the code-coloring script in your blog".
Well, that shouldn't be too much trouble, I thought. Just create a javascript function wich gets all pre tags, sends the contents to the server, and then replace the previous contents with the new color-coded values.

And so a whole day went by. The regular code took about 2 hours, and Internet Explorer took the other 5 hours, because of all it's bugs and mis-interpretations.
But, well, here it is: a way to automatically color-code your <pre>-tag contents!

Check out the example
Download the code (including example) here
View the source code: colorcode.js, colorcodeTEST.html, doColorCoding.cfm, or the CodeColoring.cfc file

The way it works

You can check out the colorcode.js file, or read the steps underneath.
The colorcode.js file uses the jQuery library, which adds an onLoad event for the function colorcode().
The colorcode() function does the following:

get all pre tags
collect their contents
remember and then remove any existing html tags inside the pre contents
then re-create normal html by changing html-entities (like <) back to normal html (like <)
then send the content to the server-file doColorCoding.cfm using ajax
The server-file color-codes the given text using CodeColoring.cfc.
Then, the color-coded text is returned to the javascript, which replaces the old pre-tag's content with the color-coded text.

The last step was the most interesting, because a simple

pretag.innerHTML = colorCodedText;

doesn't work.
Instead, I had to use the following code, which looks really simple, but took hours to find:

/* now change the pre-text in the document */
/* Workaround is necessary for IE's innerHTMl.
 * The browser is being stupid again, see http://www.quirksmode.org/bugreports/archives/2004/11/innerhtml_and_t.html
 */
if ("outerHTML" in pretags[ref])
{
 pretags[ref].outerHTML = "<pre>" + colorText + "</pre>";
} else
{
 pretags[ref].innerHTML = colorText;
}

Installation

First download the zip file, and extract the contents into the root of your (coldfusion-enabled) website.
To check if all is working, open the url http://yoursite.com/colorcodetest.html. The contents should jump from plain black text to color-coded text, just like in my online example.

Now add the colorcode.js file into the html of your site like this:

<html><head>
   [...]
   <script type="text/javascript" src="/colorcode.js"></script>
   [...]
</head>
[... rest of your code]

Now open up your website in your browser, and browse to a page which holds one or more <pre> tags with code contents inside.
In case something is not working, then check to se if the 'onload' function is not overriden by another script. Also check to see if coldfusion didn't throw an error (because of tag restrictions for example), and check the browser for javascript errs.
If you can't find out what's wrong, you can always contact me!