How My ColdFusion Code Snippet Color Coding Works

Posted March 28, 2007 at 2:26 PM

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.

Stepping back, I realized that color coding the code snippets was all about a few key elements:
LI - both closing and opening played heavily into the SPAN creation.
Comment tags - I didn't want to format anything inside a comment tag.
CF/HTML tags - I only want to color attributes within tags.
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:

Launch code in new window » Download code as text file »

<cffunction
name="ColorCode"
access="public"
returntype="string"
output="false"
hint="This takes code samples and color codes for display.">
<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[^>]*>)|()|(</?[a-z]+)|(/?>)|("")"
);
// 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( "^</cfscript", LOCAL.Value )){
// Add the span.
LOCAL.Value = ("" & LOCAL.Value);
// Update the state.
LOCAL.State.InCF = true;
LOCAL.State.InScript = false;
}
// Check to see if we found a close tag.
if (
REFindNoCase( "/?>$", LOCAL.Value ) AND
LOCAL.State.InCF
){
// Add the span.
LOCAL.Value = (LOCAL.Value & "");
// 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 = ("" & LOCAL.Value);
}
if (LOCAL.State.InCF){
LOCAL.Value = ("" & LOCAL.Value);
}
if (LOCAL.State.InHTML){
LOCAL.Value = ("" & LOCAL.Value);
}
if (LOCAL.State.InAttribute){
LOCAL.Value = ("" & 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 & "");
}
if (LOCAL.State.InCF){
LOCAL.Value = (LOCAL.Value & "");
}
if (LOCAL.State.InHTML){
LOCAL.Value = (LOCAL.Value & "");
}
if (LOCAL.State.InAttribute){
LOCAL.Value = (LOCAL.Value & "");
}
}
// Check to see if found a comment.
if (LOCAL.Value EQ "<!--"){
// Add the span.
LOCAL.Value = ("" & 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 "-->") AND
LOCAL.State.InComment
){
// Add the span.
LOCAL.Value = (LOCAL.Value & "");
// 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( "^<cf", LOCAL.Value ) AND
(NOT LOCAL.State.InComment)
){
// Check to see if we started a script tag.
if (REFindNoCase( "^<cfscript", LOCAL.Value )){
// Update the state.
LOCAL.State.InScript = true;
}
// Add the span.
LOCAL.Value = ("" & 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( "^</cf", LOCAL.Value ) AND
(NOT LOCAL.State.InComment)
){
// Add the span.
LOCAL.Value = ("" & 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( "^<(?!cf)", LOCAL.Value ) AND
(NOT LOCAL.State.InComment)
){
// Add the span.
LOCAL.Value = ("" & LOCAL.Value);
// Update the state.
LOCAL.State.InHTML = true;
}
// Check to see if we found a close tag.
if (
REFindNoCase( "/?>$", 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 & "");
// 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 & "");
// 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 = ("" & LOCAL.Value);
// Update the state.
LOCAL.State.InAttribute = true;
} else {
// Add the span.
LOCAL.Value = (LOCAL.Value & "");
// 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.

Download Code Snippet ZIP File

Post Comment | Ask Ben | Print Page

You Might Also Be Interested In:

Newer Post
Ask Ben: ColdFusion Variable Caching And How To Use It (Simple Demo)

Older Post
Edit.com Partners With cPanel To Provide Web Maintenance Services

Reader Comments

shuns

Mar 28, 2007 at 6:14 PM // reply »

76 Comments

250 Points

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?

Ben Nadel

Mar 28, 2007 at 6:17 PM // reply »

7,572 Comments

36,838 Points

@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.

shuns

Mar 28, 2007 at 6:33 PM // reply »

76 Comments

250 Points

Yeah I am definately seening it, but it may be the browser I am using (IE7)?

Ben Nadel

Mar 29, 2007 at 7:49 AM // reply »

7,572 Comments

36,838 Points

@Shuns,

I see it in IE6. One tiny flaw. I see it. I am not closing my span after CFSCRIPT. Will update now.

Ben Nadel

Mar 29, 2007 at 7:57 AM // reply »

7,572 Comments

36,838 Points

@Shuns,

You the man. I have fixed it. I have also updated the code posting.

shuns

Mar 29, 2007 at 6:00 PM // reply »

76 Comments

250 Points

No worries mate, glad to help.

David Buhler

Nov 29, 2007 at 4:50 PM // reply »

41 Comments

225 Points

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

Ben Nadel

Nov 29, 2007 at 5:04 PM // reply »

7,572 Comments

36,838 Points

@David,

I am not sure what you mean by without having to return process? Can you explain that a bit more?

Paul Klinkenberg

Mar 9, 2009 at 8:21 PM // reply »

6 Comments

45 Points

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)

Ben Nadel

Mar 10, 2009 at 8:38 AM // reply »

7,572 Comments

36,838 Points

@Paul,

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

Post Comment | Ask Ben

Author Name:
Author Email:
Author Website:
Comment:	Formatting: <strong>bold</strong> <em>italic<em>
	Remember my information
	Subscribe to entry *
	Send me a copy of this comment (as part of the comment thread)

Jason Dean

Mar 21, 2010 at 11:13 AM

A New Wrist Pain

@chiropractor suwanee, Spoken like someone trying to sell something. Other than for minor, temporary relief from some back pain, chiropractic treatment is nothing but placebo effect and quackery. ... read »

Delon

Mar 21, 2010 at 6:32 AM

ColdFusion CFPOP - My First Look

Apologies... The field name in the db for C. is "BounceCode" It stores the code / message which is returned in the email. Sorry for the confusion. ... read »

Mar 21, 2010 at 6:29 AM

@Jose Galdamez, Hi Ben and Jose 1st of all.. big thanks to Jose for his Skype chat a few weeks back. Your time was much appreciated. I have come up with a rather unelegant solution to my problem a ... read »

chiropractor suwanee

Mar 21, 2010 at 3:42 AM

Chiropractic treatment is one of the best methods for treating numerous health problems naturally. After years of experience being a chiropractor, I have found that it is a powerful way to solve many ... read »

Jorge

Mar 20, 2010 at 12:07 PM

Drawing On The iPhone Canvas With jQuery And ColdFusion

Simply awesome. Saved my day. ... read »

Frits Offenbach

Mar 20, 2010 at 9:00 AM

Building A Fixed-Position Bottom Menu Bar (ala FaceBook)

I would like to say thx for an easy way to create a bottom bar. I do have a ?. Is it possible to center the bar if i want to resize it to ex 85%. Regards Offenbach ... read »

Gojko

Mar 19, 2010 at 7:26 PM

MySQL 3/4 - com.mysql.jdbc.Driver And allowMultiQueries=true

Thank you very much for this post. Adding allowMultiQueries="true" in context.xml didn't help until I added it to url as allowMultiQueries=true Good idea is to use prepared statements and it will he ... read »

Jim

Mar 19, 2010 at 4:49 PM

Nobody Puts Baby In The Corner!

Wow. This is like suddenly finding a support group for your secret shame. I'm not alone! I always liked this movie, even though it is extremely cheesy. I just wish Jennifer Grey hadn't gotten the ... read »

How My ColdFusion Code Snippet Color Coding Works

You Might Also Be Interested In:

Reader Comments

Post A Comment