veilletech.frCe qui se passe
Dave Rupert a cassé la coloration syntaxique de son blog Jekyll. Après avoir utilisé au fil des ans Highlight.js, PrismJS, Rouge et Shiki, et éprouvé les compromis de chaque implémentation — côté client comme côté serveur — il a préféré explorer une autre voie plutôt que d'en adopter une de plus.
Le résultat s'appelle MicroLighter : un coloriseur syntaxique côté client qui s'appuie sur l'API CSS Custom Highlights.
Le mécanisme
C'est là que tout se joue. Les coloriseurs classiques enveloppent chaque élément
de code dans une balise <span> portant une classe. L'API Custom Highlights
inverse la logique : on déclare des plages de texte à CSS, et le style
s'applique via le pseudo-élément ::highlight().
Concrètement, la bibliothèque scanne les blocs de code avec des motifs, puis
appelle CSS.highlights.set(catégorie, plages). Aucune mutation du DOM. Le
périmètre de la bibliothèque se réduit d'autant, et c'est ce qui explique sa
taille.
Les caractéristiques annoncées :
- ~2 Ko minifié et compressé, zéro dépendance
- Les grammaires de langage viennent de TextMate — celles qu'utilise VS Code
- Toutes les grammaires sont chargées à la demande : on ne paie que les langages effectivement présents
- Thèmes en CSS lisible, avec la fonction
light-dark() - Les fonctions annexes sont déportées dans un élément personnalisé
<micro-lighter>
Le choix des grammaires TextMate
Rupert explique n'avoir pas besoin de beaucoup de coloration : tous ses articles n'ont pas de code, et ses exemples dépassent rarement quinze lignes. Sa vraie difficulté est de changer souvent de langage — HTML, CSS et JavaScript dans un même article, un peu de bash, un peu de ruby, du markdown à l'occasion.
Couvrir tout cela a rapidement dépassé ce que ses expressions régulières pouvaient absorber. D'où le recours aux collections de motifs de TextMate, établies et éprouvées. Le chargement à la demande découle du même constat : c'est le principe qu'il s'est fixé pour éviter de gonfler la configuration et le paquet.
Les limites
Elles sont réelles et l'auteur les énonce d'emblée. Le pseudo-élément
::highlight() ne gère ni l'italique, ni le gras, ni le changement de police.
Si votre thème de coloration repose sur ces variations — commentaires en italique, mots-clés en gras — ce n'est pas pour vous. Sinon, l'auteur qualifie la syntaxe d'idiomatique : exprimer « je veux mettre ce jeton en valeur » en CSS plutôt qu'en injectant des balises partout.
À retenir
Une démonstration nette de ce que le CSS moderne reprend au JavaScript. Le gain n'est pas seulement la taille — 2 Ko contre plusieurs dizaines — mais l'absence de mutation du DOM, avec ce qu'elle évite de reflows et d'interférences avec le reste de la page.
Source : daverupert.com