Eine Schriftart mit integrierter Syntaxhervorhebung

Problem

• Beim Erstellen einer von Hand in HTML und CSS geschriebenen Website ist Syntaxhervorhebung schwierig
• Code-Snippets sollen farblich hervorgehoben werden, damit sie sich leichter lesen und verstehen lassen
• Üblicherweise muss man dafür komplexe Syntax-Highlighting-Bibliotheken wie Prism oder highlight.js verwenden
• Man möchte von Hand coden, ohne externe Skripte zu verwenden

Syntaxhervorhebung direkt in die Schriftart mit OpenType-Funktionen einbauen

• Eine Open-Source-Schriftart namens Monaspace Krypton wurde modifiziert, sodass sie farbige Varianten der einzelnen Zeichen enthält
• Mithilfe der COLR-Tabelle von OpenType und der Funktion für kontextbezogene Ersetzung werden bestimmte Zeichenfolgen gefunden und ersetzt
• Das Ergebnis ist ein einfacher Syntax-Highlighter, der direkt in die Schriftart eingebaut ist

Vor- und Nachteile

Vorteile

• Einfache Installation: Schriftart importieren und die OpenType-Funktionen COLR (Farbe) und CALT (kontextbezogene Ersetzung) aktivieren
• Kein JavaScript erforderlich
• Kein CSS-Theme erforderlich
• So schnell wie reiner Text
• Code-Snippets können in <pre>- und <code>-Tags eingefügt werden
• Sauberer HTML-Quellcode
• Funktioniert überall dort, wo OpenType-Funktionen unterstützt werden, etwa in InDesign
• Keine Wartung oder Updates erforderlich
• Funktioniert auch in <textarea> und <input>

Nachteile

• Wenn Änderungen nötig sind, etwa an der Farbpalette oder zur Unterstützung weiterer Sprachen, muss die Schriftdatei selbst angepasst werden
• Funktioniert nur dort, wo OpenType unterstützt wird
• Die Mustersuche über kontextbezogene OpenType-Ersetzung ist grundlegend und nicht mit Skripten auf Basis regulärer Ausdrücke vergleichbar

So funktioniert es tatsächlich

• Verwendet werden die OpenType-COLR-Tabelle und kontextbezogene Ersetzung
• Die COLR-Tabelle ermöglicht mehrfarbige Schriftarten
• Die kontextbezogene Ersetzung erkennt benachbarte Zeichen und ersetzt sie
• Beispiel: Das JavaScript-Schlüsselwort if wird gefunden und durch eine farbige Variante ersetzt

Zusammenfassung von GN⁺

• Dieser Artikel stellt eine neue Methode vor, um beim manuellen Coden von Websites Syntaxhervorhebung umzusetzen
• Durch die Nutzung von OpenType-Funktionen wird die Syntaxhervorhebung direkt in die Schriftart eingebaut, sodass sie auch ohne JavaScript oder CSS-Themes möglich ist
• Diese Methode eignet sich für einfache Syntaxhervorhebung, hat aber im Vergleich zu komplexen Syntax-Highlighting-Bibliotheken ihre Grenzen
• Projekte mit ähnlicher Funktionalität sind unter anderem Prism und highlight.js

[GN⁺]

Hacker-News-Kommentare

• Interessanter Hack

  • Es gibt etwas Verwirrung über die Verwendung von OpenType-Features
  • Die Einstellung font-feature-settings: "colr", "calt"; ergibt keinen Sinn
  • Das Feature-Tag colr existiert nicht in den OpenType-Layout-Tabellen
  • Vermutlich war beabsichtigt, die COLR-Tabelle zu aktivieren
  • Das Feature calt ist standardmäßig aktiviert
  • In Firefox und Chrome funktioniert es gut, in Safari jedoch nicht

• Der Originaltext bleibt unverändert erhalten

  • Es funktioniert mit userContent.css ohne Tag-Wrapping oder JS
  • Das ist ein Ansatz auf einer ganz anderen Ebene

• Ich bin kein OpenType-Experte, daher könnte die Fallback-Logik verbessert werden

  • Ich bin bereit, die angepassten Quelldateien zu teilen
  • Wenn jemand Ideen oder Feedback hat, bitte melden

• Dieser Hack ist furchtbar, aber verblüffend

  • Er missbraucht die kontextuelle Ersetzungsfunktion von OpenType auf großartige Weise
  • Danke fürs Teilen

• Großartiger Hack

  • Mit etwa 45 kB ist es ähnlich groß wie das Baseline-highlight.js
  • Es funktioniert auch in Umgebungen, in denen JavaScript deaktiviert ist
  • Dafür sind die Konfigurierbarkeit zur Laufzeit und die Sprachunterstützung eingeschränkter

• Unten auf der Seite steht eine gute Botschaft

  • "Diese Website verwendet keine Cookies und verlinkt nicht auf Seiten Dritter"
  • Das gefällt mir

• Es sieht so aus, als ließe sich das mit Code automatisieren

  • Eine nützliche Methode für allgemeine Anwendungsfälle

• Es gibt einen Bug in Chromium-basierten Browsern

  • Wenn man color: blue eingibt, wird nur das r hervorgehoben
  • Nach Kopieren und Einfügen funktioniert es korrekt
  • Trotzdem eine coole Funktion

• Wirklich coole Funktion

  • Sie lässt sich nicht nur in Textareas und Eingabefeldern, sondern auch in großen HTML-Dokumenten verwenden
  • Man braucht nicht viele span- und HTML-Tags zu verwenden
  • Hardwarebeschleunigte Font-Rendering-Software übernimmt alles
  • Das könnte viel Speicher und CPU sparen

• Es scheint etwas zu brauchen, das wie ein Parser-Generator arbeitet

  • Es ist nicht klar, wie ausdrucksstark die Regeln sind

• Wirklich erstaunliche Funktion

  • Ich freue mich darauf, das mit besseren Schriftarten zu sehen (z. B. Inconsolata oder JetBrains Mono)
  • Es wäre nützlich, um JSON einfach darzustellen