SyntaxHighlighter macht Quellcode schön

Der „syntaxhighlighter“ von Google Code ist ein freies Skript, um die Syntax der Sprachen C++, C#, CSS, Delphi, HTML, Java, JavaScript, PHP, Python, Ruby, SQL, VB und XML iauf Websites farbig darzustellen. Der Highlighter ist vollständig in JavaScript geschrieben, arbeit rein clientseitig und lässt sich per CSS anpassen.

Hier ein Beispiel in der Sprache CSS zur Demonstration der Auszeichnung.

/* TOGGLER */
div.toggler > *:first-child {
   margin-top: 0;
}

.toggler_head {
   background-image: url('images/expand.gif');
   background-repeat: no-repeat;
   background-position: left center;
   padding-left: 16px;
   cursor: pointer;
}

* html .toggler_head {
   cursor: hand;
}

So funktioniert’s

Das Funktionsprinzip ist einfach: „pre“-Elemente (präformatierter Text), die Code darstellen sollen, werden mit einem Attribut „name“ und einer CSS-Klasse für die verwendete Sprache versehen:

<pre name="code" class="php">
   <?php
      echo "Dies ist Quellcode";
   ?>
</pre>

All diese „pre“-Element werden beim Seitenaufbau im Browser per JavaScript durch die entsprechend ausgezeichnete Syntax ersetzt.

Einbindung von „syntaxhighlighter“ in die Seite

Zunächst muss dafür die JavaScript-Bibliothek am Ende der Seite eingebunden werden, und die Syntax Hervorhebung eingeschalten werden:

<script type="text/javascript" src="sh/shCore.js"></script>
<script type="text/javascript">
	dp.SyntaxHighlighter.HighlightAll('code', true, false);
</script>

Das Aussehen lässt sich über eine mitgelieferte CSS-Datei steuern. Auch diese muss in die Seite eingebunden werden:

<link type="text/css" rel="stylesheet" href="sh/syntaxhighlighter.css"></link>

Tipp: „syntaxhighlighter“ valide machen

Leider nutzt „syntaxhighlighter“ das nicht standardisierte Attribut „name“ im „pre“-Element. Somit sind die Webseiten, auf denen das Skript verwendet wird, nicht valide. Deshalb sollte man statt „name“ einfach „title“ verwenden, was im (X)HTML-Standard vorgesehen ist. Damit „syntaxhighlighter“ weiterhin funktioniert, muss man nur Zeile 145 in der Datei „shCore.js“ anpassen:

if(tags[i].getAttribute('name')==name)

ändern zu:

if(tags[i].getAttribute('title')==name)

Highlighting in Content-Management-Systemen

Auch in Content-Management-Systeme lässt sich das Skript wie gehabt leicht einbinden. Einige Editoren von Content-Management-Systemen parsen jedoch den eingebenen Text und verändern diesen beim Abspeichern. Damit lässt sich Quellcode nicht immer problemlos speichern. Hier bieten sich spezielle Plugins bzw. Extensions für die verschiedenen Systeme an, die diese Schwachstellen beheben und die Benutzung von „syntaxhighlighter“ vereinfachen. Scrollleiste.de beispielsweise nutzt das WordPress-Plugin „SyntaxHighlighter„.

Das serverseitige PHP-Framework „GeSHi“ (Generic Syntax Highlighter) ist als Syntax Highlighter aus dem Foren-System „phpBB“ entstanden. Inzwischen ist dieses als eigenständiges Framework ausgekoppelt und lässt sich in diversen Forensystemen, Blogs und Wikis integrieren.

Wenn’s schnell gehen muss, liefert auch der Online-Dienst „Quick Highlighter“ aus Copy&Paste-Code-Schnipseln HTML-Markup inklusive CSS, um diese farbig in die eigene Website einzubetten.