dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
Projekt anfragen
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
Projekt anfragen

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.

prism themes.jpg Solides Syntax-Highlighting mit Prism
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.

prism download.jpg Solides Syntax-Highlighting mit Prism
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.

Wie hilfreich war diese Info?

Gesamtbewertung: 0 / 5. Anzahl Bewertungen: 2 0

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.
close menu icon