Printversion: Syntax highlighting - Tool-Tipp Syntaxhervorhebung

Für jeden Webmaster, der sich mit dem Thema Web-Publishing und Technologie befasst, stellt sich die Frage der Darstellung von Beispielcode. Doch wie erreicht man eine übersichtlichere Darstellung derartiger Codesnippets?

Im Rahmen der Erstellung unserer Testsuite (Link: http://www.validome.org/blog/news/Item-56), mußten wir uns zwangsläufig etwas intensiver mit dem Thema Syntax highlighting befassen. Die Übersichtlichkeit der Darstellung verschiedener Codebeispiele ist für ein derartiges Projekt von großer Bedeutung und so begaben wir uns auf der Suche nach einem brauchbaren Tool für die Syntaxhervorhebung.
Hierfür kamen nach einer gewissen Vorauswahl zwei Tools in Betracht, von denen wir uns schlußendlich für das serverseitig einsetzbare GeSHi entschieden haben.

GeSHi - Highlighting serverseitig
GeSHi (Link: http://qbnz.com/highlighter/) steht für Generic Syntax Highlighter, ist in PHP geschrieben, Open Source und unterstützt Syntaxhervorhebung für eine Unmenge an Sprachen. Das Tool ist sehr leicht zu installieren, die Einbindung in eigene Anwendungen gestaltet sich ebenfalls sehr einfach. Die Codesprache, in der das Highlighting vorgenommen werden soll, muss übergeben werden. Einziger Wermutstropfen bei GeSHi: Will man die Zeilennummerierung im Zusammenhang mit der Syntaxhervorhebung nutzen, so kommt es zu einer fehlerhaften Einfärbung einiger Codeabschnitte. Wir haben zwar den Bug an die Entwickler gepostet und detailliert beschrieben, bisher wurde der Bug allerdings noch nicht behoben. Nicht weiter schlimm, die Vorteile des bewährten Highlighters überwiegen bei weitem. Die Darstellung des Codes ist überaus gefällig, hier ein Beispiel eines fehlerhaften XHTML-Codesnippets (Fehler in der XML-Deklaration (Link: http://www.validome.org/lang/ge/errors/XML-DECLARATION/1010))

<?xml version="" encoding="ISO-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
  <head>
    <title>missing XML-Version</title>
  </head>
  <body />
</html>

Hier noch ein kleines Beispiel für JavaScript (Bookmarking)

<script type="text/javascript">
var url = "http://www.validome.org/blog/";
var title = "Validome Weblog";
function bookmark() {
if(document.all) {
window.external.AddFavorite(url,title);
}
} 
</script>

Google Code Prettifier - Die JavaScript-Alternative
Der Google Code Prettifier (Link: http://code.google.com/p/google-code-prettify/) bewältigt ebenfalls gängige HTML-, XHTML-, XML- und CSS-Syntaxhervorhebung mit Leichtigkeit, hat allerdings einige Probleme mit dem Highlighting von PHP-Codesnippets und gewährt keinerlei Unterstützung für Sprachen wie beispielsweise Smalltalk. Vorteil bei diesem Tool: Die Visualisierung der Codebeispiele erfolgt mittels JavaScript und CSS, dei Einbindung ist mehr als einfach durch das Einfügen des hervorzuhebenden Codes in einem pre-Element mit der vorgegebenen Klasse prettyprint: <pre class="prettyprint">...</pre>.

Fazit: Benötigt man Syntax Highlighting nur im eingeschränkten Maße (z.B. für Markup-Sprachen, CSS, JavaScript) und legt man Wert auf blitzschnelle Umsetzung ohne serverseitiger Implementierung, ist Googles Code Prettifier hervorragend, zudem es einige gute Ansätze für mögliche (eigene) Weiterentwicklungen vorweist. Bedenkt man allerdings die 46 kb JavaScript, die bei jedem Seitenabruf geladen werden und will man auch Codesnippets in Sprachen wie beispielsweise VB oder Smalltalk farblich hervorheben, so ist von Anfang an GeSHi das Mittel der Wahl.

Artikel drucken

27.03.2007

Syntax highlighting - Tool-Tipp Syntaxhervorhebung