是否可以在 <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>

尝试构建一个小型的离线所见即所得编辑器，想知道是否可以为输入到 textarea 的代码提供某种形式的实时语法突出显示 - 类似于 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>

是否可以在 <textarea> 中为 HTML/CSS/JS 设置语法高亮？

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

html

javascript

css

syntax-highlighting

codemirror