Skip to main content
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Virginia Klebau
Ben Nadel at CFUNITED 2010 (Landsdown, VA) with: Virginia Klebau

How My ColdFusion Code Snippet Color Coding Works

By
Published in Comments (14)

I have been through about 5 iterations of trying to get my color coding to work. It has been complicated because I output my code using unordered lists (UL) which I just feel is the right way to do it. It gives you excellent control over line spacing, wrapping, and just formatting in general... formatting other than color coding of course. Color coding is much tougher with this style as you cannot start a SPAN tag in one LI and then end it in another LI.

All of my previous attempts tried to strip out LIs, do crazy ass regular expressions, replace out and back in brackets and quotes and well frankly, it was a beast! This time around I decided to start from scratch and just totally simplify the process.

  1. Stepping back, I realized that color coding the code snippets was all about a few key elements:

  2. LI - both closing and opening played heavily into the SPAN creation.

  3. Comment tags - I didn't want to format anything inside a comment tag.

  4. CF/HTML tags - I only want to color attributes within tags.

  5. End Tags and Self Closing Tags - Do I need to do anything.

What I realized quickly is that color coding was a matter of State. When I hit a "token" in the code, what state am I in? How does this state affect how I alter the text that I am looking at? Awesomely enough, looking at it this way made the coding a 100% easier. What used to be a convoluted regex-heavy UDF is now this:

<cffunction
	name="ColorCode"
	access="public"
	returntype="string"
	output="false"
	hint="This takes code samples and color codes for display.">

	<!--- Define arguments. --->
	<cfargument name="Code" type="string" required="true" />

	<cfscript>

		// Define the local scope.
		var LOCAL = StructNew();

		// Create a pattern for parts of the code display.
		LOCAL.Pattern = CreateObject( "java", "java.util.regex.Pattern" ).Compile(
			"(?i)(</?div[^>]*>)|(</?li[^>]*>)|(&lt;!--)|(--&gt;)|(&lt;/?[a-z]+)|(/?&gt;)|("")"
			);

		// Create a pattern matcher based on our input.
		LOCAL.Matcher = LOCAL.Pattern.Matcher( ARGUMENTS.Code );

		// Create a buffer to build our return text.
		LOCAL.Buffer = CreateObject( "java", "java.lang.StringBuffer" ).Init();


		// Create some state values so that we can determine which actions
		// we are supposed to take for each group.
		LOCAL.State = StructNew();
		LOCAL.State.InCF = false;
		LOCAL.State.InHTML = false;
		LOCAL.State.InAttribute = false;
		LOCAL.State.InComment = false;
		LOCAL.State.InScript = false;


		// Loop over the matcher.
		while( LOCAL.Matcher.Find() ){

			// Get the gurrent group value.
			LOCAL.Value = LOCAL.Matcher.Group();


			// Check to see if we in script. If we are, we need
			// to do things very differently.
			if (LOCAL.State.InScript){


				// Check to see if found a cloase cfscript tag and that we
				// NOT in a comment tag.
				if (REFindNoCase( "^&lt;/cfscript", LOCAL.Value )){

					// Add the span.
					LOCAL.Value = ("<span class=""cfmlcodecolor"">" & LOCAL.Value);

					// Update the state.
					LOCAL.State.InCF = true;
					LOCAL.State.InScript = false;

				}


				// Check to see if we found a close tag.
				if (
					REFindNoCase( "/?&gt;$", LOCAL.Value ) AND
					LOCAL.State.InCF
					){

					// Add the span.
					LOCAL.Value = (LOCAL.Value & "</span>");

					// Update the state.
					LOCAL.State.InCF = false;

				}


			} else {


				// Check to see if we found a close list item.
				if (REFindNoCase( "^</li", LOCAL.Value )){

					// Close all existing span tags. Check states
					// to see what we have going on.
					if (LOCAL.State.InComment){
						LOCAL.Value = ("</span>" & LOCAL.Value);
					}

					if (LOCAL.State.InCF){
						LOCAL.Value = ("</span>" & LOCAL.Value);
					}

					if (LOCAL.State.InHTML){
						LOCAL.Value = ("</span>" & LOCAL.Value);
					}

					if (LOCAL.State.InAttribute){
						LOCAL.Value = ("</span>" & LOCAL.Value);
					}

				}


				// Check to see if we found an open list item.
				// If this is the case, we have to re-start any tags
				// that we closed in the previous close list item.
				if (REFindNoCase( "^<li", LOCAL.Value )){

					// Re-start any existing span tags. Check states
					// to see what we have going on.
					if (LOCAL.State.InComment){
						LOCAL.Value = (LOCAL.Value & "<span class=""commentcodecolor"">");
					}

					if (LOCAL.State.InCF){
						LOCAL.Value = (LOCAL.Value & "<span class=""cfmlcodecolor"">");
					}

					if (LOCAL.State.InHTML){
						LOCAL.Value = (LOCAL.Value & "<span class=""htmlcodecolor"">");
					}

					if (LOCAL.State.InAttribute){
						LOCAL.Value = (LOCAL.Value & "<span class=""attributecodecolor"">");
					}

				}


				// Check to see if found a comment.
				if (LOCAL.Value EQ "&lt;!--"){

					// Add the span.
					LOCAL.Value = ("<span class=""commentcodecolor"">" & LOCAL.Value);

					// Update the state.
					LOCAL.State.InComment = true;

				}


				// Check to see if found a close comment and that we
				// are already in a comment.
				if (
					(LOCAL.Value EQ "--&gt;") AND
					LOCAL.State.InComment
					){

					// Add the span.
					LOCAL.Value = (LOCAL.Value & "</span>");

					// Update the state.
					LOCAL.State.InComment = false;

				}


				// Check to see if found a cf tag and that we are NOT in
				// a comment tag.
				if (
					REFindNoCase( "^&lt;cf", LOCAL.Value ) AND
					(NOT LOCAL.State.InComment)
					){

					// Check to see if we started a script tag.
					if (REFindNoCase( "^&lt;cfscript", LOCAL.Value )){

						// Update the state.
						LOCAL.State.InScript = true;

					}

					// Add the span.
					LOCAL.Value = ("<span class=""cfmlcodecolor"">" & LOCAL.Value);

					// Update the state.
					LOCAL.State.InCF = true;

				}


				// Check to see if found a cloase cf tag and that we
				// NOT in a comment tag.
				if (
					REFindNoCase( "^&lt;/cf", LOCAL.Value ) AND
					(NOT LOCAL.State.InComment)
					){

					// Add the span.
					LOCAL.Value = ("<span class=""cfmlcodecolor"">" & LOCAL.Value);

					// Update the state.
					LOCAL.State.InCF = true;

				}


				// Check to see if found an open HTML tag and that we
				// are not in a comment.
				if(
					REFindNoCase( "^&lt;(?!cf)", LOCAL.Value ) AND
					(NOT LOCAL.State.InComment)
					){

					// Add the span.
					LOCAL.Value = ("<span class=""htmlcodecolor"">" & LOCAL.Value);

					// Update the state.
					LOCAL.State.InHTML = true;

				}


				// Check to see if we found a close tag.
				if (
					REFindNoCase( "/?&gt;$", LOCAL.Value ) AND
					(NOT LOCAL.State.InComment)
					){


					// Check to make sure that we are NOT in an attribute
					// and NOT in a comment.
					if (
						(NOT LOCAL.State.InAttribute) AND
						(NOT LOCAL.State.InComment)
						){

						// Check to see if we are in a CF tag.
						if (LOCAL.State.InCF){

							// Add the span.
							LOCAL.Value = (LOCAL.Value & "</span>");

							// Update the state.
							LOCAL.State.InCF = false;

						}

						// Check to see if we are in a HTML tag.
						if (LOCAL.State.InHTML){

							// Add the span.
							LOCAL.Value = (LOCAL.Value & "</span>");

							// Update the state.
							LOCAL.State.InHTML = false;

						}

					}

				}



				// Check to see if we found a quote.
				if (LOCAL.Value EQ """"){

					// Check to see if we are in a tag. This is the only time
					// that we are going to want to do anything with it.
					if (
						LOCAL.State.InCF OR
						LOCAL.State.InHTML
						){

						// Now, check to see if we are starting or ending an
						// attribute value.
						if (NOT LOCAL.State.InAttribute){

							// Add the span.
							LOCAL.Value = ("<span class=""attributecodecolor"">" & LOCAL.Value);

							// Update the state.
							LOCAL.State.InAttribute = true;

						} else {

							// Add the span.
							LOCAL.Value = (LOCAL.Value & "</span>");

							// Update the state.
							LOCAL.State.InAttribute = false;

						}

					}

				}


			}


			// Add the replacement text.
			LOCAL.Matcher.AppendReplacement(
				LOCAL.Buffer,
				LOCAL.Value.ReplaceAll( "([\\\$])", "\\$1" )
				);

		}


		// Add the reset of the stuff to buffer.
		LOCAL.Matcher.AppendTail(
			LOCAL.Buffer
			);


		// Return the string buffer.
		return( LOCAL.Buffer.ToString() );

	</cfscript>
</cffunction>

Dude, I just color coded my color coding function - doesn't that blow your mind!?!?

As you can see CFScript does not lend itself to good color coding in the solution I have now. But really, that is just a matter of adding more "state" logic. Notice also that this works effortlessly with my highly structured UL/LI code formatting. Furthermore, I use my own CSS classes with lends itself to XHTML validation - sweeeet!

It's not there yet, but I am definitely on the right track now.

Want to use code from this post? Check out the license.

Reader Comments

76 Comments

Hi Ben,

I noticed that it/something recent seems to have made your website text the same colour as the CFML tags (dark red) - so maybe something is amiss?

15,841 Comments

@Shuns,

I am not seeing it. Our server has been having some "issues" today. I think it was getting lonely or something. Anyway, it randomly starting throwing JRUN errors intermittently. It is certainly possible you caught it in a bad mood.

If you still see this, please let me know and I will look into it. Thanks for giving me the heads up.

45 Comments

This seems like it might be a great start to becoming a CF Beautifier. A few of us have been hunting around for a Formatter, like HTMLTidy or Oxygen (for XML)...but for Coldfusion.

Do you have any examples on how to pass the CFML as an argument and then to output it without having the return process as a CF script?

For Reference:
http://www.coldfusionjedi.com/index.cfm/2007/10/11/ColdFusion-Code-Beautifiers
http://groups.google.com/group/cfeclipse-users/browse_thread/thread/560d489c8955986d

DB

11 Comments

I have rewritten another code coloring script you have also been contributing to for blogCFC.
After the 12 hour rewrite I did, it now color-codes coldfusion code really well, even if there are obscure regular expressions in it etc.
You can check my blog about it at http://www.leeftpaulnog.nl/2009/03/my-supreme-coldfusion-code-coloring.html (in English)

15,841 Comments

@Paul,

Looks pretty good! I really need to put some more work into mine. It's crap for things like SQL and Javascript.

61 Comments

Hi Ben,
Quick question on the regex used here. What is the purpose of the (?i) in your pattern matcher. Been researching regex for a little while now but cant seems to get this one. Looks like something to do with named groups maybe?
Thanks

15,841 Comments

@Steven,

The (?i) is a flag for case-INsensitive. It makes whatever follows it match upper and lower case values the same. So, for example:

(?i)[a-z]

... is the same as:

[a-zA-Z]

There are a number of flags that I love:

x - verbose
m - multi-line mode
s - single-line mode

These can be combined:

(?ix)

... is both case-insensitive and verbose. This kind of stuff can be done for an entire expression if it is at the very beginning; or, it can be done for just a particular group:

Sandard ((?i)text) here

I hope that helps.

I believe in love. I believe in compassion. I believe in human rights. I believe that we can afford to give more of these gifts to the world around us because it costs us nothing to be decent and kind and understanding. And, I want you to know that when you land on this site, you are accepted for who you are, no matter how you identify, what truths you live, or whatever kind of goofy shit makes you feel alive! Rock on with your bad self!
Ben Nadel