Bagaimanakah Saya Boleh Mencapai Serlahan Teks Berbilang Warna dalam Kawasan Teks dan Input?

Mencapai Penserlahan Teks Berbilang Warna dalam Kawasan Teks dan Input

Penyertaan teks berbilang warna dalam kawasan teks dan medan input telah menarik minat anda, dan anda mendapatkan panduan tentang cara mendekati perkara ini tugasan. Walaupun pemikiran awal anda melibatkan gabungan CSS, JavaScript dan sentuhan ajaib, adalah penting untuk memahami batasan yang terlibat.

Cabaran Teknikal

Ia bukan mungkin untuk mencapai penonjolan teks berbilang warna secara langsung dalam kawasan teks atau medan input menggunakan CSS. Elemen ini tidak mempunyai sokongan untuk menggunakan gaya yang berbeza pada bahagian teks tertentu. Percubaan untuk mengubah suai warna teks akan menjejaskan keseluruhan kandungan dalam kawasan input atau teks.

Penyelesaian: Hayati Elemen Boleh Sunting Kandungan

Untuk mencapai penyerlahan sintaks dalam teks interaktif medan, anda perlu mengubah pendekatan anda ke arah menggunakan elemen boleh diedit kandungan. Elemen khas ini membolehkan penciptaan kawasan teks boleh diedit dalam dokumen HTML. Dengan menggabungkan fungsi Boleh Diedit kandungan, anda memperoleh keupayaan untuk menggunakan gaya CSS yang berbeza pada bahagian teks yang berbeza.

Contoh

Pertimbangkan coretan kod berikut sebagai contoh:

<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>