如何在文字編輯器中實現多色文字突出顯示？

文字編輯器中的多色文字突顯

要在文字區域或文字輸入元素中引入多色文字突出顯示，您主要需要深入研究JavaScript 和CSS 的領域。但是，請務必注意，這些元素本身並不支援使用不同顏色的文字突出顯示。

對於語法突出顯示功能，您需要利用：

可編輯元素： 在現有HTML 元素上使用contenteditable 元素或contenteditable 屬性，使用戶能夠編輯文字內容。

JavaScript：

• 利用JavaScript 識別關鍵字
• 建立具有適當顏色類別的span 元素並將其附加到目標關鍵字。

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中文網其他相關文章！