Zum Hauptinhalt Zur Navigation

Golem Plus Artikel
Syntax-Highlighting mit Highlight.js:
Code sichtbar machen

Wirkt einfach, ist aber technisch komplex: Wir erklären, wie Highlight.js Parsing, Performance und Gestaltung zu einer erfolgreichen Weblösung vereint.
/ Fabian Deitelhoff
1 Kommentare News folgen (öffnet im neuen Fenster)
Syntax Highlighting mit Highlight.js (Bild: Golem.de)
Syntax Highlighting mit Highlight.js Bild: Golem.de

Quellcode liest niemand wie Prosa. Ob wir ihn schnell verstehen oder mühsam entziffern müssen, hängt davon ab, wie gut der Code strukturiert und visualisiert ist. Farben, Abstände und visuelle Struktur sind dabei keine Kosmetik, sondern ein zentrales Werkzeug. Genau hier setzt Syntaxhervorhebung an. Sie macht aus Text wieder Bedeutung und aus Code ein visuell erfassbares System.

Highlight.js gehört seit Jahren zu den meistgenutzten Werkzeugen dafür. Viele kennen die Bibliothek aus Blogs, Dokumentationen oder Entwicklerportalen. Weniger bekannt ist jedoch, wie viel Technik, Designentscheidungen und Architektur hinter dieser scheinbar einfachen Hervorhebung stecken. Und warum genau diese Details darüber entscheiden, ob Highlight.js nur nett aussieht oder in komplexen Projekten wirklich trägt.

Golem Plus Artikel