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