Color Coding My Code Samples - UGGG!
Posted August 29, 2006 at 8:26 AM by Ben Nadel
I am finding it very hard to automate the coding of my code samples. I tried looking into Ray Camden's BlogCFC code, but unfortunately his does not work for my situation. My code is not stored a single string. Instead, my code is stored in an unordered list (<ol>) where each list item (<li>) is a single line of code (or partial line of code). I find this gives me much greater control over how the code is indented and how the lines wrap. I have to thank the XStandard people for the suggestion, which i LOVE.
However, because of this, I may or may not have a single ColdFusion tag that includes multiple list items. I am not sure how to add the color coded spans. I can't just add them at the beginning of one li and the end of another li as this is not XHTML compliant (nor do the color actually traverse the li's). I have to break each segment into it's own code block, therefore, remembering which the last code block was - am I in a new span tag? Am I continuing the span tag?
Then to make matters worse, what if one of the tags has a double quote in an attribute value, or a < or > in an attribute value. How do I know if I am at the end of a tag or in the middle of an attribute value? Both would be stored as < and > respectively. This is proving very frustrating.
But, I know I have to get this done as it makes the code soooo much more readable.
Reader Comments
I put my code between <pre> tags so that they indent just like I want them to. I run it through Dain Anderson's coloredcode.cfm or if it is in my blog I use Ray Camden's which I have modified with the pre tags. It may work to run each individual line through coloredcode.cfm. I have the file if you need it.
Trevor,
Hey man, thanks for dropping me a line. If I could get a look at Dain Anderson's code that would be sweeet. I am not sure I want to depart from the list code as I love the control it gives me over display, wrapping, scrolling, etc.... but how knows, I want to go with whatever works best.
Thanks for the help.
I know this may be a silly question, but ...
Why not run it through the color-coder /before/ you split it into list items? (Or, for existing code, de-list, color-code, re-list.)
Admittedly, the re-listing part would be interesting. You'd have to have a tag stack for each line, and when you end a line, you close all of the open tags, then re-open them at the beginning of the next line. Aren't state machines fun?
Oh, and I don't know if you were aware, but your code-as-unordered-list trick mades viewing your posts in Google Reader that much more interesting:
http://rickosborne.org/images/screenshots/Ben-Nadel-Google-Reader.png
-R
Rick,
Yeah, no matter what I do, its gonna be hard. I just don't want to do it manually as that will royally suck. I am still messing around with stuff... I am looking into using GetToken() to rip out each token, check the state (yeah state machines are fun) and rebuild. We will see... then I also have the problem of editing a blog entry... how will it know NOT to re-color code. I am thinking that this is something that I have to do PRE blog entry - like a special text field that I paste into that runs over the code, then I take that and put it into the blog.
I see the list in the PNG you sent. That is also the way it shows up in Feed-Squirrel. Are you saying you do or don't like it. Personally, I like it because it retains it's structure. Sure, you loose the indentation that you would have in my blog... but there is nothing I can do about that.
Of course, I am always open to other solutions as I always want what is best.
Nah, I'm not saying I do or don't like it. It just takes a second to go "that's not a grocery list, that's code!". Maybe an ordered list would make for less cognitive dissonance?
Also, I've noticed that Yahoo! uses a JavaScript code-colorer, thus routing around many of the problems you mentioned. For example:
http://developer.yahoo.com/yui/connection/
Theirs also does spiffy things like adding in line numbers, making popups for windows with nothing but the code, etc.
But then, of course, you'd have the joys of writing a CF parser in JavaScript. At which point several dozen CF gurus would rip it from your site and give you absolutely no credit. So ... yeah.
Actually, I guess, you could probably take the one from Yahoo!, special-case it to color <cf* tags a little different, and then provide it with a list of CF-specific functions to also color a little differently. Shouldn't be *too* horrific.
...
It looks like Yahoo! uses the syntax highlighter from here:
http://www.dreamprojections.com/syntaxhighlighter/
It's got a concept of "brushes", with a brushes for SQL, JavaScript, HTML, and XML built-in. Adding a CF-brush probably wouldn't be too hard.
Rick,
Awesome links man! Thanks for the good direction. I am not sure that I want to parse the code every time the page loads, but I might be able to go this route pre-form-submission and then save it as the highlighted code some how.
As far as the unordered list vs. ordered list, I went with the unordered list for copy-paste usage. If it was an ordered list and then you copied and pasted code into a text editor, each line begins with a different number (hence ordered list). However, with an unordered list, if you copy and paste into a text editor, only a bullet or a hash sign start each line. I just figured the hash symbol would be easier for people to replace out than unique numbers for each line.
But thanks again for the links, I will check them out asap.
Rick, that is pretty dang slick. You know, I'm seriously considering trying that in BlogCFC.
dp.SyntaxHighlighter, which Rick suggested, is indeed pretty cool, and it's what I use (not on my blog, which is shitty, but at work). SyntaxHighlighter has some very cool features like smart tabs, etc. Unfortunately, the author does not appear to be a regex expert (e.g., multi-line comments are very poorly supported in the XML/XTHML brush). I fixed the multi-line comments in my implementation, and started a basic CFML brush (one e.g. of a difference from the XML brush is not styling the variable name in cfset tags the same as attribute names). If you do end up using the library, I'd be very interested in seeing what you come up with for a CFML brush, or if you're interested I could show you the preliminary work I've done so far (which is good enough for basic CF code examples).
Steve,
It does look like an awesome library. I am not quite sold on the client-side color coding. But, I am also not sold on color-coding ON OUTPUT. Ideally, what I would like is to color-code on input. I have not seen anything that I am fully in love with.
To date, I have not seen anything that works all that great. A lot of the libraries that color code use PRE tags. A PRE tag is great of a pop-up window or something, but as far as embedded within site content, PRE tags are horrible for layout control. One of the things that drives me up the wall is see poor line-wrapping in code. Code that wraps all the way to the gutter is not readable (at least to me). I use unordered lists which wrap text lines exactly how I want... problem is that LIs make SPAN tags hard to use. I am like 95% there in terms of parsing it and pushing-popping open/close span tags but I was doing it on output which was slow.
I will figure it out some day.
Just FYI, dp.SyntaxHighlighter is implemented using <textarea> elements, which are converted to <ol>s at runtime. One big advantage of using textareas instead of pre elements for receiving input is that you can use "<" and ">" characters (vs. "<" and ">") inside it.
Textarea... that is cool. Textarea can handle all the correct characters (as you point out). I think in order to use that, I would have to re-do the way I store my code snippets. Right now, my code goes right into my content on INPUT. I had an idea about storing my code snippets separately in my database and then in XStandard, I could put in templates like :
<codetemplate id="3453" />
or something, which would then get parsed on OUTPUT. But then again, I am doing too much on output. I don't like the idea of messing too much with my code on output. What to do, what to do.
