Syntaxhighlighter v. highlight.js

Vor kurzer Zeit habe ich mich auf die Suche nach einem Plugin für WordPress gemacht, welches Quellcode-Ausschnitte in HTML, CSS, PHP, JavaScript etc. ähnlich einem Editor (wie z.B. PSPad) auf einer HTML-Seite präsentieren kann, d.h. den Quelltext als HTML automatisch farbig hervorheben kann, mit anderen (englischen) Worten: Syntax Highlighting als JavaScript-/PHP-Plugin für WordPress. Nach kurzem Recherchieren bin ich auf zwei gute JavaScript-Plugins gestoßen: syntaxhighlighter und highlight.js. Ich habe beide ausprobiert und mich für das zweite entschieden – warum, versuche ich weiter unten darzustellen. Die Entscheidung ist mir nicht leicht gefallen, denn beide haben in meinen Augen ihre Vor- und Nachteile. Aber Eins nach dem Anderen.

Syntaxhighlighter ist ein leicht zu integrierendes JavaScript-Plugin. Es besteht auch die Möglichkeit, Highlight-Skripts nur für ausgewählte Sprachen zu laden, um so die Ladezeit der Seite nicht unnötig überbelasten. Für das Einbinden des Plugins sind im Header sind folgende Zeilen einzubinden:

<link rel="stylesheet" type="text/css" href=".../SyntaxHighlighter.css" />
<script type="text/javascript" src=".../shCore.js"></script>
<script type="text/javascript" src=".../shBrushCss.js"></script>
<script type="text/javascript" src=".../shBrushHtml.js"></script>
<script type="text/javascript" src=".../shBrushJScript.js"></script>
<script type="text/javascript" src=".../shBrushPhp.js"></script>

Im Footer vor dem </body>-Tag sind noch folgende Zeilen einzutragen:

<script type="text/javascript">
dp.SyntaxHighlighter.ClipboardSwf = '.../clipboard.swf';
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Drei Punkte (“…“) im Pfad sollen entsprechend dem Ablageort der Dateien auf dem Webserver angepasst werden.

Und das war’s schon im Prinzip – das Ergebnis sieht optisch ansprechend aus. Das ist aber noch nicht alles, denn die Anzeige lässt sich konfigurieren. Mit den Optionen, welche im Attribut “class” nach dem Doppelpunkt eingetragen werden, lassen sich z.B. die Zeilennummern oder der Header abschalten (siehe Abb.).

Der obige HTML-Code in der Abbildung sieht so aus:

<pre name="code" class="php">
// IP-Adresse des Clients
$cl_ip = $_SERVER['REMOTE_ADDR'];
echo $cl_ip; //--> z. B. 79.16.164.82
</pre>

Der untere HTML-Code in der Abbildung sieht so aus:

<pre name="code" class="php:nocontrols">
// IP-Netzmaske des Clients
$cl_sub = substr($cl_ip, 0, strrpos($cl_ip,"."));
echo $cl_sub; //--> z. B. 79.16.164
</pre>

Die Spitzeklammern! im Code sollten natürlich mit der HTML-Codierung &lt; und &gt; umgewandelt werden. Dafür gibt es diverse WP-Plugins wie z.B. Decoder Button.

Es stehen folgende Optionen zur Verfügung:

• noControls – Die Funktionen “view plain”, … werden nicht angezeigt
• noGutter – Zeilennummern werden nicht angezeigt
• collapseAll – Collapse wird ein- oder abgeschaltet
• firstLine – Zeilennummerierung ab einer bestimmten Nummer starten
• showColumns – Zeigt Reihen und Spalten in der ersten Zeile

Fazit: Syntaxhighlighter besticht mit seinen Konfigurationsmöglichkeiten und scheint für mich persönlich einen Tick schneller zu sein als highlight.js. Doch das Attribut “name” im <pre>-Tag wird vom XHTML-Validator angemekert, was nicht so schön ist. Außerdem bietet syntaxhighlighter nicht so viele Layout-Möglichkeiten mit CSS wie highlight.js. Ansonsten ist ein gutes Plugin für jede Site, die sich mit Quellcode befasst.

highlight.js hat mich mehr überzeugt, wobei ich die CSS-Layout-Möglichkeiten noch nicht intensiv ausprobiert habe. Trotz einer nach meinem Empfinden längeren Ladezeit wirkt das Layout dezenter ohne unnötige Dinge. Der Vorteil von highlight.js wäre zudem, dass das Skript die Sprache des Quellcodes automatisch erkennen soll.

Das Einbinden der Skripte und des Style Sheets ist im Header einfach zu bewerkstelligen:

<link rel="stylesheet" type="text/css" href=".../highlight.css" />
<script type="text/javascript" src=".../highlight.js"></script>

Im Footer wird der Aufruf der Funktion eingebunden:

<script type="text/javascript">initHighlightingOnLoad("css", "html", "js", "php", "xml");</script>

Bei highlight.js enspricht zudem die für den HTML-Code verwendete Semantik der klassischen Struktur:

<pre><code>
</code></pre>

Die Abbildung zeigt nun das Ergebnis mit highlight.js, der obige Quellcode sieht dann so aus (wobei die Spitzeklammern genauso umgewandelt werden müssen, damit der Quellcode der Seite valide bleibt):

<pre><code class="php">
// IP-Adresse des Clients
$cl_ip = $_SERVER['REMOTE_ADDR'];
echo $cl_ip; //--> z. B. 79.16.164.82
</code></pre>

Fazit: Ich habe mich für highlight.js entschieden, wobei ich mich natürlich später auch für Syntaxhighlighter umentscheiden könnte. Valides XHTML und flexibles Layout sind z.Z. für mich ausschlaggebend. Nur die Geschwindigkeit von highlight.js lässt zu wünschen übrig.