Rumah >hujung hadapan web >tutorial css >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:
CSS:
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!