Bagaimana untuk Melaksanakan Penserlahan Teks Berbilang Warna dalam Editor Teks?

Penyertaan Teks Berbilang Warna dalam Editor Teks

Untuk memperkenalkan penserlahan teks berbilang warna dalam kawasan teks atau elemen input teks, anda perlu mendalami alam JavaScript dan CSS. Walau bagaimanapun, adalah penting untuk ambil perhatian bahawa unsur-unsur ini tidak menyokong penyerlahan teks dengan warna yang berbeza.

Untuk fungsi penyerlahan sintaks, anda perlu menggunakan:

Elemen Boleh Diedit: Gunakan elemen contenteditable atau contenteditable attributes pada elemen HTML sedia ada untuk membolehkan pengguna mengedit kandungan teks.

JavaScript:

• Gunakan JavaScript untuk mengenal pasti kata kunci yang perlu diserlahkan.
• Buat dan tambah elemen span dengan kelas warna yang sesuai pada kata kunci yang disasarkan.

CSS:

• Tubuhkan kelas warna dalam CSS anda untuk mengawal warna serlahan untuk pelbagai kata kunci.

Contoh (dalam JavaScript dan 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>

Bekerja dengan boleh diedit elemen (berbanding dengan textarea atau input teks) memberikan fleksibiliti yang lebih besar dalam menggunakan penyerlahan teks berbilang warna.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Penserlahan Teks Berbilang Warna dalam Editor Teks?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!