Textarea That Can Do Syntax Highlighting on the Fly

Textarea that can do syntax highlighting on the fly?

It's not possible to achieve the required level of control over presentation in a regular textarea.

If you're OK with that, try CodeMirror or Ace or Monaco (used in MS VSCode).

From the duplicate thread - an obligatory wikipedia link: Comparison of JavaScript-based source code editors

Is it possible to have syntax highlighting for HTML/CSS/JS in <textarea>?

You cannot directly control syntax highlighting in a textarea. You can try JS libraries like http://www.cdolivet.com/editarea/ or if you just wnat to do it all by yourself, you can go for contenteditable .

Contenteditable is an html Attribute that enables textarea like editing in any element like div , span etc.

Although you will have to use a lot of javascript to interpret the language and highlight it accordingly.

<div contenteditable="true" style="width:100%;height:200px;border:1px solid #000"><b>This is bold text</b><br/><u>This is underlined text</u><br/>and so on..<br/><font color="#f00">class</font> <font color="#0f0">Sample</font><br/><em>{</em><br/></div>

Way to highlight code in textarea with jquery?

No, there isn't. You can apply styles to the entire textarea, but not part of the text in it.

You would need something that works as a replacement for the textarea, here is a list of some.

On fly colorizing of specific words in textarea elements

The jsfiddle site uses the codemirror editor. This editor inserts

<span class="cm-property">elements</span>

to format the code.

Examples of such libraries include the ones mentioned above:

highlight.js
prism

And for example:

google-code-prettify
jquery.syntax
SyntaxHighlighter

Textarea html tag with support `css` code

There can be really one of two ways to do that: either you will implement it yourself OR use ready made libraries. Solutions like that exist in great variety and it could save you a lot of time to use one of following or find a similar one:

Edit Area
highlight.js
CodeMirror

Simple Javascript highlighting in a text area?

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.

Can I implement rich text via invisible textarea over a pre?

You could use thee CSS-property caret-color for the textarea. This will set the color specifically for the cursor/ caret and ignore the color of the background/ text for the textarea. This does unfortunately not work in IE/ Edge (It is however supported by the remaining major browsers).

Textarea That Can Do Syntax Highlighting on the Fly