How My ColdFusion Code Snippet Color Coding Works : Kinky Solutions : A Student's Perspective by Ben Nadel

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

Comments (8) | Post Comment | Ask Ben | Permalink | Print Page

Related Blog Entries

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

Edit.com Partners With cPanel To Provide Web Maintenance Services

Reader 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?

Posted by Shuns on Mar 28, 2007 at 6:14 PM

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

Posted by Ben Nadel on Mar 28, 2007 at 6:17 PM

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

Posted by Shuns on Mar 28, 2007 at 6:33 PM

@Shuns,

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

Posted by Ben Nadel on Mar 29, 2007 at 7:49 AM

@Shuns,

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

Posted by Ben Nadel on Mar 29, 2007 at 7:57 AM

No worries mate, glad to help.

Posted by Shuns on Mar 29, 2007 at 6:00 PM

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

Posted by david buhler on Nov 29, 2007 at 4:50 PM

@David,

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

Posted by Ben Nadel on Nov 29, 2007 at 5:04 PM

Post Comment | Ask Ben