javascript - 是否可以在 <textarea> 中对 HTML/CSS/JS 进行语法高亮显示？

Question

下面是我的意思:

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>

尝试构建一个小型的离线所见即所得编辑器，并想知道是否可以为文本区域中的代码输入提供某种形式的实时语法高亮显示——类似于 codepen 或 jsfiddle。

我遇到过 Codemirror 库，但它似乎不适用于实时输入。

Answer 1

您不能直接控制文本区域中的语法突出显示。你可以尝试像 http://www.cdolivet.com/editarea/ 这样的 JS 库或者，如果您只想自己完成所有操作，则可以选择 contenteditable 。

Contenteditable 是一个 html 属性，可以在 div 、 span 等任何元素中启用 textarea 等编辑

尽管您将不得不使用大量 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>