Solides Syntax-Highlighting mit Prism

JavaScript-Bibliotheken zum Hervorheben von Quelltexten sind nicht neu. Zu den zahlreichen Angeboten hat sich nun der Syntax-Highlighter Prism gesellt, der allerdings mit lediglich drei Kilobyte Dateigröße sehr platzsparend daherkommt. Seine weiteren Features sind so interessant, dass ich Ihnen Prism im folgenden Beitrag einmal vorstellen will.

Die drei Themes von Prism

Platzsparend durch modularen Aufbau

Wer Prism verwenden möchte, stellt sich seine eigene Version selbst zusammen. Neben dem Core gibt es die Wahl zwischen drei verschiedenen Themes, den Sprachen und zusätzlichen Plugins. Die Dateigröße des Cores liegt bei 3,5 KB, das Gesamtpaket inklusiver aller Sprachen und Plugins liegt bei knapp über 10 KB. Unterstützt werden Markup-Sprachen, CSS, JavaScript und Java.

Bei den Themes gibt es die Auswahl zwischen einem hellen, einem dunklen und einem „funky“ Theme, welches eher verspielt und trendy daherkommt. Das jeweilige Theme wird als CSS-Datei separat zur JavaScript-Datei heruntergeladen. In der JavaScript-Datei sind neben dem Core auch die ausgewählten Plugins untergebracht.

Download von Prism

Beim Zusammenstellen der eigenen Prism-Bibliothek lässt sich jederzeit die Dateigröße der zusammengestellten Bibliothek (inklusive der CSS-Datei) ablesen.

Prism einbinden und anwenden

Die CSS-Datei wird im HTML-Header und die JavaScript-Datei am Ende des HTML-Body eingebunden. Quelltexte, die mit dem CODE-Element ausgezeichnet sind, werden fortan mit dem Prism-Highlightning versehen. Über das LANG-Attribut gibt man die verwendete Sprache an:

<code lang="language-css">p { color: red}</code>

Für die Darstellung ganzer Absätze wird das CODE-Element zusätzlich mit dem PRE-Element umschlossen.

Plugins für weitere Funktionen

Prism bietet drei Plugins, mit denen die Funktionalität erweitert werden kann. So gibt es die Möglichkeit, bestimmte Zeilen und Zeilenbereiche hervorzuheben. Darüber hinaus existiert ein Plugin zur Darstellung nicht sichtbarer Zeichen wie Zeilenumbrüche und Tabulatoren, sowie ein Plugin, welches URLs und E-Mail-Adressen innerhalb der Quelltexte automatisch verlinkt.

Fazit: Prism ist sehr einfach eingebunden und bietet mit seinen drei Plugins ein solides und funktionsstarkes Syntax-Highlightning an.