Update September 2010: added Usage chapter, and added caching to disk for colored code.
I wanted to display some coldfusion code in the browser, for an opensource twitter plugin I wrote.
Of course, I wanted the syntax to be color-coded, so I googled for coldfusion code coloring.
I didn't find one that could color my code as it should be, so I decided to write my own code. As a good start I used the colorCode code as posted and partly written by Dale Fraser.
One of the problems of coloring code, is the existence of certain characters within tags.
For example, <cfset x=rereplace(y,'</?span[^>]*>', '') /> will most of the time not be correctly displayed, just like this one: <cfset x="It's called ""cake""." />.
So one of the first things to do, was to convert these 'quotes within quotes', <'s and >'s into their respective html entities (" / ´ / < / >)
Files
Now I must say, it took me about 12 hours before I got it totally right! I did a complete rewrite, and even added css color coding 'because I felt like it' ;) With regular expressions floating around in my head at night, and paid work still waiting to get done, here it is:
- CodeColoring.zip V1.3
- View the v1.3 source code: CodeColoring.cfc
Usage
(I can't believe I am only writing this Usage chapter now, 17 months after the first release :-/ )
Download and unzip the zip file. You will see two files: codeColoring.cfc, and test.cfm.
Just go ahead and open test.cfm in your browser, enter some cfml code, and press the button. Voila!
So how do you get it to work? By using the following code:
<cfset codeColoring_obj = createObject("component", "CodeColoring") />
<cfset yourColoredCode = codeColoring_obj.cachedColorString(dataString="YOUR CFML TEXT") />
There are a lot of extra options you can use:
- lineNumbers: shows line numbers (default=YES)
- keepTabs: do you need to convert tabs to spaces, or keep them as tabs (default=YES, keep the tabs)
- activateLinks: create html links for every link found in the text (default=YES)
You use these options by adding them as arguments:
<cfset yourColoredCode = codeColoring_obj.cachedColorString(dataString="YOUR CFML TEXT", lineNumbers=false, keepTabs=true, activateLinks=true) />
Extra functions.
You can also send a file path to te codeColoring object, instead of text, by calling the function colorFile():
<cfset yourColoredCode = codeColoring_obj.colorFile(dataString="YOUR CFML TEXT", useCaching=[TRUE|FALSE]) />
Do you see the argument "useCaching"? By default this is set to YES, because it improves the speed of your application.
Lastly, you can also use the function colorString(), which is exactly the same as cachedColorString, except it does not cache the colored results:
<cfset yourColoredCode = codeColoring_obj.colorString(dataString="YOUR CFML TEXT") />
Automatic caching to application/server scope (version 1.3: to disk by default)
This component might be taking from 10 to 5.000 millisecs. How much time it takes, is dependent on 3 main factors:
- the length of the text to color;
- the amount of quotes-within-quotes;
- the amount of <'s and >'s within tags.
The execution time of the component is reported in the html source code, underneath the colored code (I added some timers to the code)
Because of the possible long execution time, I added an automatic caching mechanism for color coded strings as well, which will save you the cpu time at every code view except the first!
It is integrated into the cfc itself, so you'll be using it without even seeing it.
If you need to re-color the code, i.e. because you changed the rendering code, then just add '?killcache=1' to the url of the page showing the colored code.
If you're using the code, please leave me a comment! I'd appreciate it :-)
Revisions and version info
March 9, 2009, Version 1.0
- totally updated the code, added css / function names / green quoted strings / regex safety / keepTabs arg. / quotes within quotes, and the caching mechanism.
April 14, 2009, Version 1.1
- Fixed a bug which impacted the way in which quoted elements of css strings were shown, i.e. <b style="font-family: 'Arial'">
January 26, 2010, Version 1.2
- Improved coloring of cfml comments; improved the detection of quoted strings.
- Added optional hyperlinking of urls within the code.
- Improved the coloring of tags which have tags inside, like <option <cfif x> selected</cfif> value="z">
- Fixed some small issues
March 21, 2010, Version 1.2.1
- Fixed an unscoped variable in _formatCss function
June 13, 2010, Version 1.2.2
- Changed the regex for url matching, so that some special characters are only matched in the query-string (after a question mark)
August 12, 2010, Version 1.2.3
- Added css classname "colored" into the pre tag which is returned by function colorString.
September 18, 2010, Version 1.3
- Now saving all colored data to disk, to improve performance. This can be switched off in the cfc.
Recent Comments