【问题标题】：Is it possible to have syntax highlighting for HTML/CSS/JS in <textarea>?是否可以在 <textarea> 中对 HTML/CSS/JS 进行语法高亮显示？
【发布时间】：2017-08-24 04:14:02
【问题描述】：
这是我的意思的一支笔：
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>
尝试构建一个小型离线所见即所得编辑器，并想知道是否可以为输入到 textarea 的代码提供某种形式的实时语法突出显示 - 类似于 codepen 或 jsfiddle。
我遇到了 Codemirror 库，但它似乎不适用于实时输入。
【问题讨论】：
标签：
javascript
html
css
syntax-highlighting
codemirror
【解决方案1】：
您不能直接控制文本区域中的语法突出显示。你可以试试http://www.cdolivet.com/editarea/ 之类的 JS 库，或者如果你只想自己做这一切，你可以选择 contenteditable 。
Contenteditable 是一个 html 属性，可以在 div、span 等任何元素中进行类似编辑的文本区域。
尽管您将不得不使用大量 javascript 来解释语言并相应地突出显示它。
<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>
更新
如果计划一些第三方库，您可以使用 highlight.js：
https://highlightjs.org/
它可以与您的 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>