テキスト領域と入力で多色のテキストの強調表示を実現するにはどうすればよいですか?

テキスト領域と入力フィールドでの多色テキストの強調表示の実現

テキスト領域と入力フィールドでの多色テキストの強調表示に興味があり、これにアプローチする方法についてのガイダンスを求めています。タスク。最初の考えでは 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>