Search code examples
javascriptsyntax-highlightingwysiwyg

Are there any JavaScript live syntax highlighters?


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:
https://stackoverflow.com/questions/379185/free-syntax-highlighting-editor-control-in-javascript


Solution

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