如何在文字區域和輸入中實現多色文字突出顯示？

在文字區域和輸入中實現多色文字突出顯示

文字區域和輸入欄位中的多色文字突出顯示引起了您的興趣，並且您尋求有關如何實現此目標的指導任務。雖然您最初的想法涉及 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="snippet-code-html lang-html prettyprint-override"><div contenteditable="true">
  <span style="color: blue">var</span> foo = <span style="color: green">"bar"</span>;
</div>