Fullmoon Syntactic Code Highlighter : notes de conception pour un affichage sûr du code

Conception d’un outil de coloration qui distingue la tokenisation fondée sur les grammaires TextMate de la production sûre du DOM et limite le coût de rendu des longs extraits de code.

1. Distinguer la tokenisation de l’affichage

Ce document présente les notes de conception d’un outil de coloration du code. Une grammaire TextMate définit des règles de tokenisation qui attribuent des scopes au code ; elle n’équivaut pas à un analyseur AST comprenant entièrement la sémantique du langage. Oniguruma étant un moteur d’expressions régulières, son exécution en WebAssembly ne supprime pas ce traitement. Distinguez les rôles de vscode-textmate et de vscode-oniguruma.

2. Affichage de base sûr

Le code ci-dessous n’est pas un moteur de coloration syntaxique, mais un exemple d’affichage de base qui présente le texte original de façon sûre lorsque la tokenisation est indisponible. Le code reçu est affecté à textContent au lieu d’être inséré tel quel dans une chaîne HTML. Consultez la documentation de textContent.

/* typescript */
export function renderPlainCode(container: HTMLElement, source: string): void {
  const pre = document.createElement("pre");
  const code = document.createElement("code");
  code.textContent = source;
  pre.append(code);
  container.replaceChildren(pre);
}

Si la tokenisation réussit, construisez les span à partir des classes de thème autorisées et de nœuds texte. Même en cas d’échec du chargement d’une grammaire ou d’un thème, le code doit rester lisible grâce à un affichage de base comme celui présenté ci-dessus.

3. Traitement des longs extraits et validation

• Charger à la demande les grammaires des langages et WebAssembly, en gérant les erreurs.
• Mesurer séparément le coût de la tokenisation et celui de la création du DOM ; envisager le découpage des tâches ou la virtualisation pour les longues entrées.
• Tester des entrées ressemblant à des balises HTML, une ligne très longue, une syntaxe incorrecte et des documents mêlant plusieurs langages.
• Ne garantir ni un facteur d’accélération ni une fréquence d’images fixes ; évaluer les performances à partir de résultats documentant la taille du code, le langage et les caractéristiques de l’appareil.