テキスト エディターでマルチカラー テキストの強調表示を実装するにはどうすればよいですか?

テキスト エディターでの多色のテキストの強調表示

テキストエリアまたはテキスト入力要素で多色のテキストの強調表示を導入するには、主に次のことを詳しく調べる必要があります。 JavaScript と CSS の領域。ただし、これらの要素は本質的にさまざまな色でのテキストの強調表示をサポートしていないことに注意することが重要です。

構文の強調表示機能については、以下を利用する必要があります:

編集可能な要素: 既存の HTML 要素で contenteditable 要素または contenteditable 属性を使用して、ユーザーがテキスト コンテンツを編集できるようにします。

JavaScript:

• JavaScript を利用してキーワードを識別します
• 適切なカラークラスを持つスパン要素を作成し、ターゲットのキーワードに追加します。

CSS:

• CSS でカラー クラスを確立し、さまざまなキーワードのハイライト カラーを制御します。

例 (JavaScript および CSS の場合):

<code class="js">// Here's the JavaScript code
const keywords = ["var", "if", "else", "for"]; // Your list of keywords
const textarea = document.getElementById("textarea");

textarea.addEventListener("input", (e) => {
  const start = textarea.selectionStart;
  const end = textarea.selectionEnd;
  const text = textarea.value.substring(start, end);

  if (keywords.includes(text)) {
    // Apply highlighting to the selected text
    textarea.value = textarea.value.substring(0, start)
      + "<span class="highlight">" + text + "</span>"
      + textarea.value.substring(end);
  }
});</code>

<code class="css">/* CSS for syntax highlighting*/
.highlight {
  color: red;
  font-weight: bold;
}</code>

編集可能ファイルの操作要素 (テキストエリアやテキスト入力とは対照的に) を使用すると、多色のテキストの強調表示をより柔軟に適用できます。

以上がテキスト エディターでマルチカラー テキストの強調表示を実装するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。