Question

I have two simple textareas where in i want to highlight the javascript code being written.
As soon as the user types the function in the text area , the keywords etc have to be displayed in different color or so.

I tried to hack this script . But couldnt get what i wanted.

Answer 1

I’ve always been interested in having textarea elements with added functionalities such as code highlighting, while still remaining as simple editable textareas. I’ve experimented a little bit here: http://www.dcc.uchile.cl/~jmunoz/

It’s far from optimal and quite buggy, but still… It allows text highlighting using arbitrary rules. I used to have a working version which allowed to change the text color (And not just the background), but It had some issues.

Basically what I do is adding a div overlay with exactly the same content and font style as the text area but with transparent fonts. The text inside has span elements wrapping certain words and phrases which may have special backgrounds, borders, etc.

To allow for different font colors, I tried making the textarea text transparent while showing the overlay div text. The main issue there was that the cursor became transparent too.

I would say that using a div with editablecontent seems like a much better option.