how to syntax highlight HTML codes entered by users in a text area?

Question

I am building a tutorial application where users can type in their HTML/Javascript/CSS codes inside a text area, after entering the codes they will hit a button called "render". on button click, the user-entered code will be rendered inside a div.

the application is itself written in HTML5 and Javascript.

The problem is when users type their codes inside the text area, it comes in plane text/or as per the text property of the text area (if I set it via CSS).

Is there any way to provide a syntax highlighting feature in my text area (which is common in many text editors including visual studio)?

Answer 1

CodeMirror would do this for you and is excellent. It has an HTML mode.

Answer 2

It's a little heavyweight, but Ace is a pretty remarkable project that does what you're asking for and more. Try out the kitchen sink demo to get a feel for it, but it can take pretty much any textarea and make a full-fledged text editor out of it.

Mozilla tri-licensed Mozilla (MPL/GPL/LGPL) code on GitHub

Answer 3

It's a difficult project to do from scratch, which is why there are tools out there that already do this.

You can see some tools here: http://en.wikipedia.org/wiki/Online_rich-text_editor

Most of these are open source, so you can add in functions pretty easily to make it work the way that you'd like.

Answer 4

Have you seen ecoder?

Which is based on EditArea (see live examples).