Auf dieser Web-Site geht es sehr oft um Code und viele Male habe ich mir
schon überlegt, wie ich Codezeilen besser präsentieren kann, als in der
etwas flachen und spröden Form wie bisher. Am sinnvollsten erschien es mir
immer, den Code so zu darzustellen, wie man ihn heutzutage auch mit den
modernen Tools programmiert: mit Syntax-Hervorhebung und Zeilennummern.
Allerdings ist es ein schwieriges Unterfangen den Code vor dem Einfügen in
die HTML-Seite entsprechend vorzuformatieren, denn zum einen unterscheidet
sich das Syntax-Highlightning der verschiedenen Sprachen und Tools und zum
anderen bläht es das Markup unglaublich auf.
Durch Zufall bin ich nun auf eine Javascript-Lösung namens
dp.SyntaxHighlighter von Alex Gorbatchev gestoßen, die es
wirklich in sich hat. Sie ist sehr einfach zu handhaben und bietet dem
Benutzer volle Kontrolle über das Aussehen der Code-Schnipsel. Das Prinzip
der Scripts ist, dass der Benutzer seinen Code lediglich in ein
Texteara-Element klemmt, diesem ein paar Attribute verpasst und fertig! Das
gesamte Highlighning geschieht im Browser des Lesers.
Die Lösung ist in mehrere Scripte aufgeteilt. So gibt es ein
Core-Script, dass die eigentliche Arbeit erledigt und für
jede gewünschte Sprache ein eigenes Definitions-Script (Brush), in denen
passende reguläre Ausdrücke abgelegt sind. Das Core-Script zerlegt den
Inhalt der Textarea in seine Einzelteile und baut die Zeilen anschließend
als nummerierte Liste wieder zusammen. Formatiert wird das Ganze über eine
extra StyleSheet-Datei, in der man sich nach Lust und Laune austoben kann.
Beispiel (unformatierte Textarea mit Visual-Basic-Code):
Beispiel (Formatierung der Textarea mit dp.SyntaxHighlighter und der
Visual-Basic-Definition)
Public Function nz(varValue As Variant, varReplace As Variant) As Variant
If IsNull(varValue) Or varValue = "" Then
nz = varReplace
Else
nz = varValue
End If
End Function
Die einzigen Unterschiede im Markup des Beispiels sind die name- und
class-Attribute der Textarea, eine Zeile für das StyleSheet und drei Zeilen Javascript:
<link type="text/css" rel="stylesheet" href="SyntaxHighlighter.css"></link>
<script class="javascript" src="shCore.js"></script>
<script class="javascript" src="shBrushVb.js"></script>
<textarea name="code" class="vb" rows="9" cols="100">
...Code
</textarea>
<script class="javascript">dp.SyntaxHighlighter.HighlightAll('code');</script>
Man muss bei der Implementierung lediglich darauf achten, dass der Javascript-Aufruf
dp.SyntaxHighlighter.HighlightAll('code') im Markup hinter der Textarea
steht, da diese bereits geladen sein muss, bevor der Highlighter in Aktion
tritt.
Aktuell gibt es Definitions-Skripte für folgende Sprachen:
- CSS
- C#
- C, C++
- Visual Basic, VB.NET
- Delphi, Pascal
- Javascript, JScript
- PHP
- Python
- Ruby
- SQL
- XML, (X)HTML, XSLT
Ich habe, da zerbit.de ein deutsches Blog ist, das
Original-Core-Script dahingehend angepasst, dass in der Titelzeile deutsche
Begriffe für die Aktionen verwendet wird.
Über das StyleSheet SyntaxHighlighter.css kann man das
Aussehen der Box und auch die Farben der Syntax-Hervorhebung den eigenen
Vorstellungen anpassen. Im Beitrag
Styles für
dp.SyntaxHighlighter habe ich eine kleine Sammlung von StyleSheets
begonnen, die man sich herunterladen kann.