Möchte der Webworker auf seinem Blog ein neues Projekt vorstellen und ein paar Zeilen Code dazu veröffentlichen, geschieht das in HTML mit <pre><code>. Aber die Ausgabe sieht dann erst einmal eher langweilig und bei längerem Code auch unübersichtlich aus. Kommt noch dazu, dass das Auge durch die Darstellung der Editoren verwöhnt ist. Doch es gibt Abhilfe in Form eines JQuery-Plugins…
Der SyntaxHighlighter
Die Grundlage dazu ist gar nicht mehr so neu – das erste Release stammt aus dem Jahre 2004 und wurde von Alex Gorbatchev kreiert. Am 26. Juli 2011 wurde der SyntaxHighlighter auf GitHub veröffentlicht und seitdem 38 Mal geforked.
Die Installation des SyntaxHighlighter ist einfach und das Plugin hat durch die JavaScript/JQuery Basis den Vorteil, dass es plattformunabhängig ist. Zur Installation und Konfiguration gleich mehr.
beautyOfCode
Lars Corneliussen hat sich den SyntaxHighlighter noch einmal vorgenommen und ihn durch ein paar nette Features erweitert. Das Projekt nennt sich beautyOfCode und existiert seit 2009. Im Gegensatz zum Papa erlaubt beautyOfCode dem User auf das komplette Paket online zuzugreifen. Desweiteren gibt es diese nette Box open links im Codefeld, welche die Buttons Sourcecode, Code kopieren und Code drucken beinhaltet, sowie Smart-Tab, HTML-Script, verschiedene Skins und Line-Wrapping.
Installation, Arbeitsweise und Konfiguration
Die erweiterte Version von SyntaxHighlighter, beautyOfCode, steht zum Download bereit unter bitbucket. Wie bereits erwähnt handelt es sich um ein JQuery-Plugin, das auch entsprechend eingebunden wird. Klingt einfach? Ist es auch, denn mit beautyOfCode muss nur noch eine JavaScript-Datei geladen werden (JQuery natürlich ausgenommen).
Das Plugin durchsucht nun den Quellcode der Internetseite nach der Kombination <pre><code> und ersetzt diese durch einen Codeblock, der das das Syntax-Highlighting ermöglicht. In einer CSS-Klasse, die dem <code>-tag zugeordnet wurde, wird vom User festgelegt, welches Highlighting angewendet werden soll (z. B. javaScript, XML, PHP…).
In einer .init-Funktion wird festgelegt, welche Komponenten (Brushes, Themes) von alexgorbatchev.com geladen werden sollen.
$.beautyOfCode.init({
theme: 'Django',
baseUrl: 'http://alexgorbatchev.com/pub/sh/current/'
defaults: { gutter: false },
brushes: ['Xml', 'JScript']
});
So sieht JS-Code auf der Seite mit dem Highlighter aus
Ein Überblick über die Konfiguration gibt es hier, sowie über die verfügbaren Brushes und Themes. Die Codebox kann über die Klasse .syntaxhighlighter zudem noch zusätzlich gestylt werden (siehe runde Ecken und Boxshadow im Beispiel oben).
Fazit
Der SyntaxHighlighter bzw. sein kleiner Bruder beautyOfCode begegnet uns auf vielen Internetseiten. Das JQuery-Plugin ist leicht zu handhaben und kann in jedes Projekt eingebunden werden. Der User sollte sich allerdings darüber im Klaren sein, dass es durch die zusätzlichen Scripte, die externen Verlinkungen (bei beautyOfCode) und die Veränderung im DOM-Baum zu Performanceeinbußen kommt.
