Bagaimanakah cara saya menggunakan penyerlahan sintaks pada coretan kod dalam fail HTML dan CSS saya?

Question

Saya baru-baru ini mula belajar HTML dan CSS.

Apabila saya menggunakan <code></code> ia hanya dipaparkan sebagai teks hitam dan putih biasa, walaupun saya harap ia akan menyerlahkan sintaks secara automatik dengan sewajarnya.

Beginilah rupanya pada masa ini:

text = "Hello World!"
print(text)

Saya mahu ia kelihatan seperti ini:

text = "Hello World!"
print(text)

Bolehkah ia dicapai hanya menggunakan HTML dan CSS?

Answer 1

Nombor

---

Memerlukan markup dan CSS yang lebih terperinci.

Contohnya:

var {
  color: blue;
}

code.operator {
  color: red;
}

code.literal {
  color: purple;
}

code.function-call {
  color: green;
}

<pre><code class="python"><var>text</var> <code class="operator">=</code> <code class="literal">"Hello World!"</code>
<code class="function-call">print(<var>text</var>)</code>

---

Untuk dilakukan secara automatik, bahasa pengaturcaraan perlu dilibatkan. Anda boleh menggunakannya untuk mempraproses kod sebelum menghantarnya ke penyemak imbas, atau menggunakan JavaScript sisi klien untuk memprosesnya selepas halaman dimuatkan.

Terdapat pelbagai perpustakaan tersedia untuk digunakan.