是否可以在HTML / CSS / JS中使用语法高亮显示 <textarea> ？

Question

Here's a pen of what I mean:

http://codepen.io/archiehicklin/pen/oZQdEG

  <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.

Answer 1

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> 

UPDATE

If planning some third party libraries you can go for highlight.js: https://highlightjs.org/

It can be integrated with your contenteditable.

 <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/highlight.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/languages/php.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.10.0/styles/purebasic.min.css" /> <script>hljs.initHighlightingOnLoad();</script> <pre><code class="html">class test {}</code></pre>