Free Syntax Highlighting editor control in JavaScript

Question

I need to let user to edit some code in my web-app. I want to highlight the syntax as he types.

Note: I need code to be highlighted on the fly, right inside editor control. I do not need offline source highlighters.

Is there some free JavaScript-based code editor which does the job?

I'll need to highlight Lua syntax, but I can add it myself, if editor API is adequate.

Answer 1

I've seen this one being used a lot lately (no LUA support though):

http://code.google.com/p/syntaxhighlighter/

Answer 2

This one is quite good Edit Area

Answer 3

Prettify works on several different languages.

Answer 4

I saw on Scott Hanselman's blog that he recommends SyntaxHighlighter. The code samples on his site look very nice. But one of the comments says the script has bugs with scrolling. I've also heard good things about prettify, but it may have bugs with formatting VBScript code.

Answer 5

I just came across CodeMirror, which is apparently also in use by Google in their AJAX APIs playground, which serves as a good demo.

This one enriches a textarea (using an iframe) and is therefore editable, unlike Prettify and SyntaxHighlighter, which merely give syntax highlighting to a non-editable element. It also works in WebKit, which EditArea didn't when I tested it.

One downside, however: looks like the inbuilt language support is limited to clientside web development stuff, like Javascript, XHTML, CSS, etc, and not many server-side languages (correct me if I'm wrong).

Answer 6

+10 for CodeMirror

@Rahul: It is relativly easy to write your own parser for CM

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.