Javascript Syntax Highlighting (Editable too!)
A few friends and I are working on a small project that allows you to access any repository (svn, cvs, etc.) from the web much like ViewCVS and WebSVN. Well, since the whole thing will be web based, I thought it would be cool to have a web based editor that acts just like any other text editor with syntax highlighting.
The problem is, most of the WYSIWYG editors out there are meant for HTML and even those don't hightlight any of your code. I always wondered how hard it would be to use javascript to parse the text within a html area and apply syntax highlighting to it on the fly by appending SPAN's with class names to do the coloring. I'm sure a similar approach is used with the regular desktop based editors.
Before I begin writing any code I always do a quick search on google to see if someone else has already done what I'm trying to do or something similar to it. I did a simple search for "javascript syntax highlighting" and found two interesting results. One was http://www.dreamprojections.com/SyntaxHighlighter/ , which uses javascript to go through your page and dynamically apply syntax highlighting to any textareas it found with certain class names. This is very handy for DISPLAYING purposes, but not for editing. The other link I found was http://helene.muze.nl/demo/ . Now this one does exactly what I want (well, almost.) The current version only highlights PHP code, but I imagine it wouldn't be too difficult to add other languages to it. Both use CSS to do their magic, so it's easy to change the colors around.
Related posts: