Comment appliquer la coloration syntaxique aux extraits de code de mes fichiers HTML et CSS ?

Question

J'ai récemment commencé à apprendre le HTML et le CSS.

Lorsque j'utilise <code></code>, il s'affiche simplement sous forme de texte brut en noir et blanc, même si j'aimerais qu'il mette automatiquement en évidence la syntaxe de manière appropriée.

Voici à quoi cela ressemble actuellement :

text = "Hello World!"
print(text)

Je veux que ça ressemble à ceci :

text = "Hello World!"
print(text)

Peut-on y parvenir en utilisant uniquement HTML et CSS ?

Answer 1

Numéro

---

Nécessite un balisage et du CSS plus détaillés.

Par exemple :

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>

---

Pour que ce soit fait de manière automatique, un langage de programmation doit être impliqué. Vous pouvez l'utiliser pour prétraiter le code avant de le transmettre au navigateur, ou utiliser JavaScript côté client pour le traiter après le chargement de la page.

Il existe diverses bibliothèques disponibles.