Menu
You can't actually render markup inside a textarea. However , you can fake it by carefully positioning a div behind the textarea and adding your highlight markup there. JavaScript takes care of syncing the content and scroll position from the textarea to the div, so everything lines up nicely.
Syntax highlighting is one strategy to improve the readability and context of the text; especially for code that spans several pages. The reader can easily ignore large sections of comments or code, depending on what they are looking for. Syntax highlighting also helps programmers find errors in their program.
The HTML <mark> tag is used to mark or highlight text that is of special interest or relevance in an HTML document. Browsers traditionally render the text found within the <mark> tag as text with a yellow background color. This tag is also commonly referred to as the <mark> element.
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
Here is the response I've done to a similar question (Online Code Editor) on programmers:
First, you can take a look to this article:
Wikipedia ― Comparison of JavaScript-based source code editors.
For more, here is some tools that seem to fit with your request:
EditArea ― Demo as FileEditor who is a Yii Extension ― (Apache Software License, BSD, LGPL)
Here is EditArea, a free javascript editor for source code. It allow to write well formated source code with line numerotation, tab support, search & replace (with regexp) and live syntax highlighting (customizable).
CodePress ― Demo of Joomla! CodePress Plugin ― (LGPL) ― It doesn't work in Chrome and it looks like development has ceased.
CodePress is web-based source code editor with syntax highlighting written in JavaScript that colors text in real time while it's being typed in the browser.
CodeMirror ― One of the many demo ― (MIT-style license + optional commercial support)
CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content ― computer programs, HTML markup, and similar. If a mode has been written for the language you are editing, the code will be coloured, and the editor will optionally help you with indentation
Ace Ajax.org Cloud9 Editor ― Demo ― (Mozilla tri-license (MPL/GPL/LGPL))
Ace is a standalone code editor written in JavaScript. Our goal is to create a web based code editor that matches and extends the features, usability and performance of existing native editors such as TextMate, Vim or Eclipse. It can be easily embedded in any web page and JavaScript application. Ace is developed as the primary editor for Cloud9 IDE and the successor of the Mozilla Skywriter (Bespin) Project.
CodePress does this, as does EditArea. Both are open source.
I would recommend EditArea for live editing of a syntax hightlighted textarea.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With