cfCodePress - Custom Tag For Real Time Code Coloring

Thu, 05 Jul 2007 11:50:00 -0400

Over the past few days I've thrown together a custom tag implementation of CodePress. Here's an abbreviated description of CodePress taken from their site:

CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it's being typed in the browser. Features

Real-time syntax highlighting » just write some code

Code snippets » on PHP example type "if" and press [tab]

Auto completion » simple type " or ( or ' or [ or { on any example below (except Plain Text)

What makes this tag cool is that you can now drop a nicely formatted block of code or a real time syntax highlighting code editor into your application with a single line of code. Check this out (go ahead, type some code): Update: Arg...Demo appears to not work here after the first time I hit the page... Check this demo instead... Update 2: OK...it works intermittently here in the blog post...weird... There are a few bugs with it - which is why I'm just previewing and not releasing the tag just yet. First and most obviously you see that when I drop my demo page as an include in BlogCFC the editor does not seem to be obeying the line breaks in the code I load initially into the editor. Check out the demo outside of my stylesheet to see a properly formatted block (anyone see anything in my stylesheet that could be goofing it?). Secondly - I've integrated the CodePress SQL, HTML and CSS templates into the CF version - and it tends to get a little goofy. For example type a comment with an SQL keyword in it and it will highlight the SQL keyword. Anyone really good with RegEx that wants to take a look at overcoming these issues? There is also an API to toggle line numbers, etc that I plan on exposing with the final release of the code.

cfsilence - cfCodePress

cfCodePress - Custom Tag For Real Time Code Coloring