Simple Javascript highlighting in a text area?

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.

score 13 · Answer 1 · edited May 23 '17 at 12:10

13

You could check Ace (demo) and CodeMirror (demo).

I suppose Textarea that can do syntax highlighting on the fly? and Online Code Editor questions will be useful for you as well.

edited May 23 '17 at 12:10

Community

1
1

answered Apr 30 '12 at 05:56

Li0liQ

11,158
35
52

score 1 · Answer 2 · answered May 05 '12 at 09:45

I think that you can use a div or section tag with content editable attribute. Inside this div or section you can use an additional markup for higlight functions, vars and etc. But this attribute work only in new browsers that support html5 attribute content editable. Here is a demo

If you need a simple js highligter, may be this one https://github.com/cloudhead/hijs is usefull for your task

score 1 · Accepted Answer · answered May 06 '12 at 20:50

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.

This exactly what i was looking for . i shall play with your code for a while. — Rahul, May 07 '12 at 12:31
Can I still get the bounty? lol. But really, don't trust that code too much, I was a much less experienced programmer back then. You can do whatever you want with it, but if I were you I would only use it as a reference and build it from scratch. — Juan Enrique Muñoz Zolotoochin, May 07 '12 at 18:19
i hope u get lol . I am creating from scratch , its just that i needed some simple basic code to start off with and create a proper library for it :) — Rahul, May 08 '12 at 08:00

score 0 · Answer 4 · answered May 04 '12 at 10:57

Because a text area cannot contain markup, you cant so highlighting per se. The approach I used for an inline spell checker was to overlay divs for words that were spelled incorrectly. This was possible because it was possible to get the x and y location of words inside the text.

However it may be preferable to overlay the textarea with a content editable div which would allow you to wrap content in spans etc and then apply styling.

Simple Javascript highlighting in a text area?

4 Answers4