Question

＆lt; p＆gt;这是我的意思：＆lt; / p＆gt; ＆lt; p＆gt;＆lt; a href =＆＃34; http：//codepen.io/archiehicklin/pen/oZQdEG" rel =＆＃34; nofollow noreferrer＆＃34;＆gt; http：//codepen.io/archiehicklin/pen/oZQdEG< / a＆gt;＆lt; / p＆gt; ＆lt; p＆gt;＆lt; div class =＆＃34; snippet＆＃34;数据琅=＆＃34; JS＆＃34;数据隐藏=＆＃34;假＆＃34;数据的控制台=＆＃34;真＆＃34;数据巴贝尔=＆＃34;假＆＃34;＆GT;＆＃13; ＆lt; div class =＆＃34; snippet-code＆＃34;＆gt;＆＃13; ＆lt; pre class =＆＃34; snippet-code-html lang-html prettyprint-override＆＃34;＆gt;＆lt; code＆gt; ＆lt; textarea id =＆＃34; html＆＃34;占位符=＆＃34; HTML＆＃34;＆GT;＆LT; / textarea的＆GT;＆＃13; ＆lt; textarea id =＆＃34; css＆＃34;占位符=＆＃34; CSS＆＃34;＆GT;＆LT; / textarea的＆GT;＆＃13; ＆lt; textarea id =＆＃34; js＆＃34;占位符=＆＃34; JS＆＃34;＆GT;＆LT; / textarea的＆GT;＆＃13; ＆lt; iframe id =＆＃34; code＆＃34;＆gt;＆lt; / iframe＆gt;＆lt; / code＆gt;＆lt; / pre＆gt;＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆LT; / DIV＆GT;＆＃13; ＆LT; / p为H. ＆lt; p＆gt;尝试构建一个小的离线wysiwyg编辑器，并且想知道是否可以使用某种形式的实时语法突出显示代码输入到textarea中 - 类似于codepen或jsfiddle。＆lt; / p＆gt; ＆lt; p＆gt;我遇到了Codemirror库，但它似乎不适用于实时输入。＆lt; / p＆gt;

Answer 1

您无法直接控制textarea中的语法突出显示。您可以尝试像http://www.cdolivet.com/editarea/这样的JS库，或者如果您只想自己完成所有这些，那么您可以选择 contenteditable 。

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

虽然您必须使用大量的JavaScript来解释语言并相应地突出显示它。

＆＃13;

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

＆＃13;

<强>更新

如果计划一些第三方库，你可以去highlight.js： https://highlightjs.org/

它可以与您的满意度集成。

＆＃13;

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

＆＃13;

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

1 个答案: