Simple Javascript highlighting in a text area?
html, javascript
Solution
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.
Problem
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.