Code-Blöcke, aber besser

Pedro Duarte hat eine Wunschliste für gestylte Code-Blöcke in Blogbeiträgen und Dokumentationen erstellt und dann eine perfekte Lösung für diese Wunschliste von Hand erstellt. Zum Beispiel eine Funktion, um bestimmte Zeilen oder Wörter innerhalb des Code-Blocks hervorzuheben. Der Zeilen-Hervorheber ist einzigartig darin, dass er nur die hervorgehobenen Zeilen syntaktisch hervorhebt und den Rest grau lässt, was eine nette Art ist, den Fokus zu lenken. Und der Wort-Hervorheber funktioniert über eine RegEx. Pedro merkt an, dass dies kein Tutorial ist, sondern nur eine Präsentation all der Funktionen, die mit einer bestehenden Kombination aus benutzerdefiniertem Code und vorhandenen Bibliotheken zusammengesetzt wurden. Es ist ziemlich spezifisch für React + Next.js + MDX, aber der Kern basiert anscheinend auf rehype, was für mich neu ist.

Die Ergebnisse sind ziemlich verdammt gut aussehende, moderne Code-Blöcke, wenn Sie mich fragen! Gleichzeitig halte ich es für genauso bemerkenswert, was nicht da ist, im Gegensatz zu dem, was da ist. Ich habe in der Vergangenheit (und ausprobiert) sehr funktionsreiche Code-Blöcke gesehen, mit Funktionen wie einer Schaltfläche zum Kopieren in die Zwischenablage, einer Schaltfläche zum Anzeigen des reinen Codes und zum Exportieren in beliebige Dienste. Pedros Code-Blöcke haben nicht einmal die Option, die verwendete Sprache anzuzeigen.

Die Wunschliste jedes Einzelnen ist anders. Eine Sache, die nicht auf Pedros Wunschliste steht, ist serverseitiges Rendering, aber man kann auf dem Blogbeitrag selbst sehen, dass es damit einwandfrei funktioniert (vermutlich ist es nur Next.js am Werk). Darauf bin ich ziemlich neidisch. Auch wenn wir letztendlich beide Prism.js als Syntax-Hervorheber verwenden, verwende ich es nur clientseitig. Mir fällt jetzt ein, dass ich das alles vielleicht in einem Cloudflare Worker durch die Verwendung von HTMLRewriter erledigen könnte – was bedeuten würde, dass es im Wesentlichen so aussieht, als wäre es serverseitig erledigt, und ich könnte die clientseitige Kopie von Prism entfernen. Aber vielleicht noch besser wäre es, wenn ich es als WordPress-Plugin machen würde. Im Grunde ein PHP-Port von Prism, was eine gewaltige Aufgabe zu sein scheint.

Meine Wunschliste für ein Code-Block-Plugin…

• Syntaxhervorhebung (sowohl auf der gerenderten Website als auch während der Erstellung)
• Serverseitig gerendertes <span class="token-foo"> für Syntaxhervorhebung
• Funktioniert gut mit den nativen WordPress-Block-Editor-Code-Blöcken (```). Zum Beispiel erkennt das Einfügen eines Code-Blocks automatisch den richtigen Block und verwendet ihn. Einfach zu konvertierender Code von und zu dieser Art von Block.
• Optionale Zeilenhervorhebung
• Optionale Zeilennummern
• Optionale Worthervorhebung
• Optionale Anzeige der Sprache (und die Möglichkeit, diese Bezeichnung zu überschreiben)
• Sehr sauber kopieren und einfügen
• Keine Notwendigkeit, Code während der Erstellung zu escapen
• Freiheit, nach Belieben auf dem Frontend zu stylen (für Modi, Themen, benutzerdefinierte Scrollbars usw.). Das Stylen von Code-Blöcken hat eine Million Dinge zu beachten, daher sollten kluge Standardeinstellungen wahrscheinlich mit dem Plugin geliefert werden, aber einfach zu überschreiben sein.
• Erweiterungsziel: Kann es auch irgendwie bei Inline-Code helfen?