scrollleiste.de

SyntaxHighlighter macht Quellcode schön

von Christoph Dietrich

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.

2 Kommentare

[…] die Quellcode-Syntax verschiedenster Sprachen auf Websites farbig darstellt (siehe Artikel “SyntaxHighlighter macht Quellcode schön“). Das Parsen des Code, um diesen einfärben zu können läuft dabei in der JavaScript-Engine […]

Performantes Syntaxhighlighting per JavaScript | scrollleiste.de

Hallo ich hab mir den Highlighter schon mal installiert und bin auch zufrieden mit den Funktionen und der Anpassbarkeit, aber ich würde es gerne interaktiver machen. Sodass ich sage bei mouseenter soll der container mit der Klasse syntaxhighlighter größer werden. Das hab ich schon mal auf einer Seite gesehen, es funktioniert aber irgendwie nicht. Wenn ich sage wenn du drüber fährst soll der wrapper kleiner werden, dann passiert auch nichts der highlighter ist also sozusagen für js unsichtbar.
Gibt es da eine Möglichkeit das zu machen?

Dominic