如何在文本区域和输入中实现多色文本突出显示？

在文本区域和输入中实现多色文本突出显示

文本区域和输入字段中的多色文本突出显示引起了您的兴趣，并且您寻求有关如何实现此目标的指导任务。虽然您最初的想法涉及 CSS、JavaScript 和一点魔法的混合，但了解所涉及的限制至关重要。

技术挑战

它不是可以使用 CSS 直接在文本区域或输入字段中实现多色文本突出显示。这些元素缺乏对特定文本部分应用不同样式的支持。尝试修改文本颜色将影响输入或文本区域内的整个内容。

解决方案：拥抱内容可编辑元素

在交互式文本中实现语法高亮字段，您需要将方法转变为使用 contenteditable 元素。这些特殊元素允许在 HTML 文档中创建可编辑文本区域。通过合并 contentEditable 功能，您可以将不同的 CSS 样式应用于不同的文本部分。

示例

请考虑以下代码片段作为示例：

<code class="html"><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class='brush:php;toolbar:false;'><div contenteditable="true">
  <span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</div>