Ein Blog wie dieses, das praktische Lebenshilfe für die Softwareentwicklung leisten möchte, benötigt einen Syntax-Highlighter für den Wysiwyg-Editor, denn sonst wäre der Zugriff auf Code-Snippets ziemlich unhandlich für einen Leser.
Dafür gibt es in Drupal das Modul Syntax Highlighter. Installationen für Drupal im Umfeld des Wysiwyg-Editors sind leider immer etwas problematisch. Deswegen wird im folgenden die Installation ausführlicher beschrieben. Hierfür muss sogar ein eigenes kleines Modul entwickelt werden, denn sonst ist das Ergebnis sehr unbefriedigend.
Vorausgesetzt wird hier die Installation von TinyMCE oder einem ähnlichen Wysiwyg-Editor für Drupal. Für die anschließende Installation des Syntax Highlighters sind dann folgende Schritte erforderlich:
- Download des Moduls Syntax Highlighter.
- Download der SyntaxHiglighter-Javascript-Sourcen in das Library-Verzeichnis z.B. "/sites/all/libraries/syntaxhighlighter_3.0.83". Die Versionsnummer hängt natürlich ab von den aktuell verfügbaren Versionen. Unterhalb dieses Verzeichnisses sollte sich nach dem Herunterladen der Ordner "scripts" mit den Javascript-Sourcen befinden.
- Jetzt installiere ich das Modul "Syntax Highlighter". Nach der Installation wird mir auf der Modul-Seite (admin/module) in der Zeile des installierten Moduls ein Konfigurationslink angeboten, den ich betätige. In der Folgemaske kann ich dann diverse Skript-Sprachen einstellen, für die der Syntax Highlighter eine Präsentation zur Verfügung stellt, z.B. PHP, sowie diverse weitere Einstellmöglichkeiten, die ich aber zunächst nicht verändere. Damit alleine kann ich aber noch nichts anfangen.
- Ich benötige noch das Modul Syntaxhighlighter Insert, um "highlighted" Code in eine Textarea eingeben zu können. Das Modul unterstützt sowohl "Plain text"- als auch Wysiwyg-Editoren. Nach dem Herunterladen in mein Modulverzeichnis finde ich auf meiner Modulseite (admin/modules) unter der Kategorie "Syntaxhighlighter Insert" drei Module, die ich alle aktiviere.
- In meiner TinyMCE-Konfiguration (admin/config/content/wysiwyg/profile/full_html/edit) kann ich jetzt unter "Buttons and Plugins" einen Button "Insert syntaxhighlighter tag" auswählen (ganz unten in der Liste).
- Ich lege nun einen kleinen Test-Artikel an, wähle für den das Text-Format "Full-HTML" (sofern ich TinyMCE für dieses Format eingerichtet habe) und finde jetzt den Button "Insert syntax highlighter tag" in meinem Toolbar.
- Wenn ich jetzt meinen Cursor dorthin setze, wo ich mein Code-Snippet platzieren möchte und dann auf den Button klicke, erscheint ein Formular, dessen wichtigste Einstellmöglichkeit die Auswahl der Skript-Sprache des Code-Snippet ist. Diese Auswahl treffe ich und schicke das Formular ab. Es erscheint eine Box, in die ich jetzt mein Code-Snippet eingebe. Noch Speichern und das müsste es gewesen sein.
Aber O Weh, OWeh, ich bekomme folgende Ausgabe:
Abb. 1: Fehlerhafte Ausgabe des Syntax Highlighters direkt nach der Installation
Der Syntax Highlighter schreibt mein Snippet komplett in die erste Zeile und die Ausgabe lässt auch schon erahnen, woran das liegt. Es handelt sich offensichtlich um ein Zeilenumbruch-Problem.
Das Problem mit dem Zeilenumbruch
Das Problem mit TinyMCE ist, dass es bei jedem Zeilenumbruch gnadenlos p-Tags oder br-Zeilenumbrüche erzeugt, je nachdem, wie es eingestellt ist. Der Syntax-Highlighter benötigt aber innerhalb des pre-Tags, wo der darzustellende Source-Code einzubetten ist, keine "br" sondern "\n"-Zeichen, um einen Zeilenumbruch formatieren zu können. Außerhalb von pre-Tags können die br-Tags natürlich sinnvoll sein.
Erster Lösungsweg (mit Vorbehalt)
Ich hatte dafür schon einmal eine Lösung mit Hilfe des Moduls Custom Filter gefunden und diesen in meinem alten Blog beschrieben. Als ich zuletzt diese Lösung wieder einsetzen wollte, funktionierte das Modul aber nicht mehr richtig. Es wurde zu dem Zeitpunkt auch kaum noch gewartet, wie man damals der Modulseite entnehmen konnte. Mittlerweile scheint sich aber wieder etwas dort getan zu haben, so dass es sich vielleicht lohnt, den in meinem alten Blog beschriebenen Weg zu gehen. Denn der ist relativ einfach, wenn man ihn herausgefunden hat. Ich habe aber nicht ausprobiert, ob er wieder funktioniert. Deshalb würde ich den zweiten Lösungsansatz empfehlen, um unnötiges Ausprobieren zu vermeiden.
Zweiter Lösungsweg
Der zweite Lösungsweg besteht in der Entwicklung eines eigenen kleinen Moduls. Keine Sorge, das ist nicht so schwierig, wie es zunächst aussieht.
Als Vorlage für die Entwicklung eines eigenen Filter-Moduls - nennen wir es "Filter SyHi" - nehmen wir das Filter Example"-Modul von drupalcode.org. Dieses passen wir so an, dass es die erforderliche Konvertierung von "<br>"-Tags zu "\n"-Zeilenumbrüchen vor der Übergabe des Textes von TinyMCE zum Syntax Highlighter vornimmt.
Die Source-Code-Analyse des Beispiels zeigt, dass nur wenige Änderungen erforderlich sind, um das Ziel zu erreichen. An dieser Stelle soll nicht auf die Änderungen im einzelnen eingegangen werden, sondern das fertige Modul "Filter SyHi" kann aus meinem Repository runtergeladen werden. Es ist sehr übersichtlich, einfach zu verstehen und dokumentiert.
Dieses Modul wird installiert und dann kann ich den Filter in die Verarbeitung des Textformats "Full HTML" einbauen.
Konfiguration
Da ich TinyMCE für das Textformat "Full HTML" konfiguriert habe wähle ich dieses Textformat unter "admin/config/content/formats" aus und klicke dort auf "configure".
In der Folgemaske aktiviere ich folgende Filter:
- Syntax Highlighter Linefeed
- syntax highlighter
- Convert linebreaks into Html (i.e. <br> und <p>) (evtl. nicht erforderlich)
Und siehe da, der Source-Code wird einwandfrei dargestellt.
Abb.2: Darstellung des Code-Snippet nach gelungener Installation