Are there any JavaScript live syntax highlighters?

Question

I've found syntax highlighters that highlight pre-existing code, but I'd like to do it as you type with a WYSIWYG-style editor. I don't need auto-completed functions, just the highlighting.

As a follow-up question, what is the WYSIWYG editor that stackoverflow uses?

Edit: Thanks to the answer below, I found two that look like they might suit my needs: EditArea and CodePress

EDIT: See this question also:
http://stackoverflow.com/questions/379185/free-syntax-highlighting-editor-control-in-javascript

Answer 1

See Google code pretify.

See this question for the edit control that stackoverflow uses.

Answer 2

Here is a really interesting article about how to write one: (Even better, he gives the full source to a JavaScript formatter and colorizer.)

Implementing a syntax-higlighting JavaScript editor in JavaScript or A brutal odyssey to the dark side of the DOM tree

How does one do decent syntax highlighting? A very simple scanning can tell the difference between strings, comments, keywords, and other code. But this time I wanted to actually be able to recognize regular expressions, so that I didn't have any blatant incorrect behaviour anymore.

Importantly, it handles regex correctly. Also of interest is that he used a continuation passing style lexer/parser instead of the more typical lex (or regex) based lexers that you'll see in the wild.

As a bonus he discusses a lot of real-world issues you'll run into when working with JavaScript in the browser.

Answer 3

I dont program a lot of javascript but JSEclipse has been pretty helpful for me in the past. It comes as an Eclipse plug-in.

I've been using it for years for free

http://www.interaktonline.com/products/eclipse/jseclipse/overview/

I also rely heavily on FireBug for Firefox whenever I deal with Javascript

Answer 4

You can also try http://softwaremaniacs.org/soft/highlight/en/ - it's fast, it supports not only javascript but many other languages. And if you need a live preview of how the highlighting will work, you can use setInterval to run the highlighting and show it in a separate box.

Answer 5

Although it has a steep learning curve, Vim is the best editor out there, for any language. It has a GUI version, but really shines in terminal editing. Any time spent learning how to use this editor is not time wasted. It has syntax highlighting, as you're looking for, as well as thousands (literally) of other features and plugins.

Answer 6

The question might be better stated as "What syntax-highlighting editor do you recommended to replace an html textarea in my web app?" (Some of the other answers here deal with desktop apps or pure-syntax highlighters, not client-side editors)

I also recommend CodeMirror, it's written in Javascript and supports lots of browsers. It uses a real parser (rather than regexps) so it can deal with complex problems like correctly highlighting escaped strings. The developer is also very responsive on the discussion group.

Answer 7

Gotta go with Bespin by Mozilla. It's built using HTML5 features (so it's quick and fast, but doesn't support legacy browsers though), but definitely amazing to use and beats everything I've come across - probably beacause it's Mozilla backing it, and they develop Firefox so yeah... There's also a jQuery Plugin which contains a extension for it to make it a bit easier to use with jQuery.