veilletech.fr
4 sept. Feed du jour
#06 CSS Article

Colorer du code sans un seul span

Zéro span ajouté. Le DOM que vous avez écrit, coloré quand même.

MicroLighter colore du code sans injecter un seul <span> : il déclare des plages de texte via la CSS Custom Highlight API et les style avec ::highlight(). Environ 2 Kio compressés, zéro dépendance, 35 grammaires TextMate chargées à la demande. L'auteur assume le compromis : RegExp natif plutôt qu'Oniguruma, donc moins de couverture et de finesse que Shiki.

2 min de lectureintermédiairevidéo 1:18
Partager
Sommaire4 sections
  1. Ce qui se passe
  2. Mise en place
  3. Le compromis, annoncé par l'auteur
  4. À retenir

Ce qui se passe

Un coloriseur syntaxique classique enveloppe chaque jeton dans un <span> : le DOM enfle, le bloc devient pénible à rendre éditable, et la bibliothèque embarque souvent un moteur d'expressions régulières compilé en WebAssembly.

MicroLighter prend le problème autrement : environ 2 Kio compressés, aucune dépendance d'exécution, licence MIT, et aucun span ajouté. Il s'appuie sur la CSS Custom Highlight API : les plages de texte sont déclarées dans des objets Highlight, puis stylées en CSS via le pseudo-élément ::highlight(). Le DOM reste celui que vous avez écrit — d'où la prise en charge des blocs de code éditables, impossible quand le contenu est haché en balises.

Mise en place

Le balisage reste standard :

HTML
<pre><code class="language-javascript">const answer = 42;</code></pre>

Puis, au chargement :

JavaScript
import "microlighter/themes/github.css";
import { highlightAll } from "microlighter";

document.body.dataset.syntaxTheme = "github";
await highlightAll();

highlightAll() accepte root, selector (par défaut pre > code) et languageAliases. Deux variantes évitent d'écrire ce code :

JavaScript
import "microlighter/microlighter.min.js";        // exécution automatique
import "microlighter/micro-lighter-element.min.js"; // élément personnalisé
HTML
<micro-lighter language="javascript" controls="copy" line-numbers>
  <pre><code>const answer = 42;</code></pre>
</micro-lighter>

Les grammaires sont au format TextMate, celui de VS Code : 35 langages, livrés en modules ES chargés à la demande — seul celui de votre bloc part sur le réseau. 10 thèmes sont fournis (GitHub, Dracula, Monokai, Night Owl, Solarized, Vesper, Min, Cobalt2, Tokyo Night, Gruvbox, Flexoki…), et microlighter/highlight.js expose le tokenizer bas niveau.

Le compromis, annoncé par l'auteur

MicroLighter lit les grammaires avec le RegExp natif du navigateur : ni Oniguruma, ni WebAssembly, ni balisage de jetons généré. C'est ce qui fait sa taille — la contrepartie est une couverture de langages et une exactitude inférieures à Shiki.

Deux conséquences pratiques à garder en tête : la coloration se fait côté navigateur, donc le code arrive brut puis se colore ; et le style passe par ::highlight(), qui n'accepte qu'un sous-ensemble de propriétés CSS. Pour une documentation ou un blog, le compromis est bon ; pour un rendu typographique exigeant à la compilation, il ne l'est pas.

À retenir

  1. npm install microlighter, un thème CSS, un appel à highlightAll().
  2. Le gain n'est pas que le poids : un DOM sans jetons reste lisible, sélectionnable proprement et éditable.
  3. Choisissez en connaissance de cause : moins de langages et une coloration moins fine que Shiki, contre une bibliothèque qui tient dans 2 Kio.

Source : MicroLighter