cfCodePress - Custom Tag For Real Time Code Coloring

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

<!--- here's the tag that creates me ---> <cfmodule template="../codepress/codepress.cfm" style="width: 500px; height: 175px;" showLineNumbers="true" autoComplete="true" readonly="false" codepressDir="/blog/myapps/codepress"/>

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.

Comments (7) | Print | Send | del.icio.us | Linking Blogs | 2151 Views