Une police avec mise en évidence de la syntaxe intégrée

Problème

• Lorsqu’on crée un site web codé à la main en HTML et CSS, la mise en évidence de la syntaxe est difficile
• On souhaite mettre le code en couleur pour que les extraits soient plus faciles à lire et à comprendre
• En général, il faut utiliser des bibliothèques complexes de mise en évidence de la syntaxe comme Prism ou highlight.js
• On veut coder à la main sans utiliser de scripts externes

Intégrer la mise en évidence de la syntaxe directement dans la police à l’aide des fonctionnalités OpenType

• Une police open source appelée Monaspace Krypton a été modifiée pour inclure des versions colorées de chaque caractère
• Les tables COLR d’OpenType et la fonctionnalité de substitution contextuelle sont utilisées pour repérer puis remplacer certaines chaînes
• Résultat : un surligneur syntaxique simple directement intégré à la police

Avantages et inconvénients

Avantages

• Installation simple : il suffit d’importer la police et d’activer les fonctionnalités OpenType COLR (couleur) et CALT (substitution contextuelle)
• Pas besoin de JavaScript
• Pas besoin de thème CSS
• Aussi rapide que du texte brut
• On peut ajouter des extraits de code dans les balises <pre> et <code>
• Code source HTML propre
• Fonctionne partout où les fonctionnalités OpenType sont prises en charge, comme dans InDesign
• Aucun besoin de maintenance ou de mises à jour
• Fonctionne aussi dans <textarea> et <input>

Inconvénients

• Si l’on veut modifier la palette de couleurs ou ajouter la prise en charge d’un langage, il faut éditer le fichier de police
• Fonctionne uniquement là où OpenType est pris en charge
• La recherche de motifs via la substitution contextuelle OpenType reste basique et ne peut pas rivaliser avec des scripts utilisant des expressions régulières

Fonctionnement concret

• Utilise les tables COLR d’OpenType et la fonctionnalité de substitution contextuelle
• La table COLR permet de créer des polices multicolores
• La substitution contextuelle reconnaît les caractères adjacents pour effectuer le remplacement
• Exemple : le mot-clé JavaScript if est détecté puis remplacé par une variante colorée

Résumé de GN⁺

• Cet article présente une nouvelle manière d’implémenter la mise en évidence de la syntaxe lorsqu’on code un site web à la main
• En exploitant les fonctionnalités OpenType pour intégrer la mise en évidence directement dans la police, il devient possible de surligner la syntaxe sans JavaScript ni thème CSS
• Cette approche convient à une mise en évidence simple, mais elle a des limites face à des bibliothèques plus avancées
• Parmi les projets offrant des fonctions similaires, on peut citer Prism et highlight.js

[GN⁺]

Avis Hacker News

• Un hack intéressant

  • Il y a un peu de confusion sur l’utilisation des fonctionnalités OpenType
  • Le réglage font-feature-settings: "colr", "calt"; n’a pas de sens
  • Le tag de fonctionnalité colr n’existe pas dans les tables de mise en page OpenType
  • Il est possible que l’intention ait été d’activer la table COLR
  • La fonctionnalité calt est activée par défaut
  • Cela fonctionne bien dans Firefox et Chrome, mais pas dans Safari

• Le texte d’origine est conservé tel quel

  • Cela fonctionne avec userContent.css, sans encapsulation dans des tags ni JS
  • C’est une approche d’un autre genre

• Je ne suis pas expert OpenType, donc la logique de remplacement pourrait être améliorée

  • Je suis prêt à partager les fichiers source modifiés
  • N’hésitez pas à me contacter si vous avez des idées ou des retours

• Ce hack est affreux, mais impressionnant

  • Il détourne brillamment la fonctionnalité de substitution contextuelle d’OpenType
  • Merci de l’avoir partagé

• Excellent hack

  • Avec environ 45 kB, c’est d’une taille comparable à la version de base de highlight.js
  • Cela fonctionne même dans des environnements où JavaScript est désactivé
  • En contrepartie, la configurabilité à l’exécution et la prise en charge des langages sont plus limitées

• Il y a un bon message en bas de page

  • "Ce site n’utilise pas de cookies et ne renvoie pas vers des sites tiers"
  • J’aime bien ce point

• On dirait que cela pourrait être automatisé par du code

  • C’est une méthode utile pour des cas d’usage courants

• Il y a un bug dans les navigateurs basés sur Chromium

  • Si on tape color: blue, seul le r est mis en évidence
  • Après un copier-coller, cela fonctionne correctement
  • Cela reste malgré tout une fonctionnalité sympa

• Vraiment très sympa

  • Cela peut être utilisé non seulement dans les textarea et les champs de saisie, mais aussi dans de gros documents HTML
  • Pas besoin d’utiliser beaucoup de span ni de balises HTML
  • Le logiciel de rendu des polices accéléré matériellement s’occupe de tout
  • Cela pourrait permettre d’économiser beaucoup de mémoire et de CPU

• On dirait qu’il faudrait quelque chose qui fonctionne comme un générateur de parseur

  • On ne sait pas clairement jusqu’où les règles sont expressives

• C’est vraiment impressionnant

  • J’ai hâte de voir cela avec de meilleures polices (par ex. Inconsolata ou JetBrains Mono)
  • Ce serait utile pour afficher facilement du JSON