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


Here’s a pen of what I mean:

 <textarea id="html" placeholder="HTML"></textarea>
    <textarea id="css" placeholder="CSS"></textarea>
    <textarea id="js" placeholder="JS"></textarea>
<iframe id="code"></iframe>

Trying to build a small offline wysiwyg editor and was wondering if it’s possible to have some form of real-time syntax highlighting for the code input into textarea – similar to codepen or jsfiddle.

I’ve come across the Codemirror library but it doesn’t seem like it would work for live input.


You cannot directly control syntax highlighting in a textarea. You can try JS libraries like 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/>


If planning some third party libraries you can go for highlight.js:

It can be integrated with your contenteditable.

<script src=""></script>
<script src=""></script>
<link rel="stylesheet" href="" />
<pre><code class="html">class test {}</code></pre>

Answered By – Shakti Phartiyal

Answer Checked By – Gilberto Lyons (AngularFixing Admin)

Leave a Reply

Your email address will not be published.