Fullmoon Syntactic Code Highlighter: Konzept für sichere Codedarstellung

Ein Highlighter-Konzept, das TextMate-Tokenisierung von sicherer DOM-Ausgabe trennt und die Renderingkosten langer Codeblöcke begrenzt.

1. Tokenisierung und Darstellung trennen

Dieses Dokument beschreibt das Konzept eines Code-Highlighters. TextMate-Grammatiken ordnen Codeabschnitten Scopes zu. Sie sind keine AST-Parser, die die Bedeutung einer Sprache vollständig erfassen. Oniguruma ist eine Engine für reguläre Ausdrücke; diese Verarbeitung entfällt auch dann nicht, wenn die Engine als WebAssembly ausgeführt wird. Die Aufgaben von vscode-textmate und vscode-oniguruma müssen unterschieden werden.

2. Sichere Basisausgabe

Der folgende Code ist kein Syntax-Highlighter. Er zeigt eine sichere Basisausgabe für den Fall, dass keine Tokenisierung verfügbar ist. Eingabecode wird nicht ungeprüft in einen HTML-String eingefügt, sondern über textContent zugewiesen. Weitere Informationen enthält die Dokumentation zu 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);
}

Bei erfolgreicher Tokenisierung werden span-Elemente mit erlaubten Theme-Klassen und Textknoten erstellt. Schlägt das Laden von Grammatik oder Theme fehl, muss der Code weiterhin über eine Basisausgabe wie die oben gezeigte lesbar bleiben.

3. Lange Eingaben verarbeiten und prüfen

• Sprachgrammatiken und WebAssembly werden bei Bedarf geladen; Ladefehler werden behandelt.
• Tokenisierung und DOM-Erstellung werden getrennt gemessen. Bei langen Eingaben werden eine Aufteilung der Arbeit oder Virtualisierung geprüft.
• Testfälle umfassen Eingaben, die wie HTML-Tags aussehen, sehr lange Einzelzeilen, ungültige Syntax und Dokumente mit mehreren Sprachen.
• Statt fester Beschleunigungsfaktoren oder garantierter Bildraten werden Ergebnisse unter dokumentierten Bedingungen für Codeumfang, Sprache und Gerät bewertet.