PlugIn „Enlighter – Customizable Syntax Highlighter” von Andi Dittrich.

Ich muss zugeben, dass ich mir bis zum Erstellen meines ersten Artikels mit Programmcode gar keine Gedanken darüber gemacht hatte, wie man auf einer HTML-Seite am sinnvollsten HTML- oder anderen Programmcode darstellt. Als es dann soweit war machte ich mich also auf de Suche nach einer Lösung.

Der eigentlich angedachte Lösungsweg mit <pre>, <code> erwies sich aber als extrem umständlich – eigentlich ungangbar, weil viele Zeichen ungewandelt werden müssen und umständliche Konstrukte aus Inline-Block-Elementen erstellt werden müssen, damit auch Einrückungen vernünftig dargestellt werden können.

So geht’s also nicht… Aber jedem WordPress-Nutzer ist es ja bekannt:  „PlugIns sind deine Freunde“.

Das PlugIn
Letztendlich fiel die Wahl auf das oben genannte PlugIn. Die Gründe für die Entscheidung pro „Enlighter“ liegen in der einfachen Installation über den Menüpunkt PlugIns->Installieren im WordPress-Backend (was das Auffinden überhaupt erst ermöglichte ermöglichte) und in der schnellen Konfiguration und der einfachen Nutzung. Ein weiterer Aspekt war die Pflege des PlugIns, die letzte Aktualisierung lag erst ein paar Tage zurück. Das PlugIn unterstützt eine große Anzahl von Programmier- bzw. Scriptsprachen, wie z.B. PHP, HTML, CSS, C, C++ etc. Die Standardsprache kann eingestellt werden.

Konfiguration
Nach der Installtion erscheint im Menü „Einstellungen“ der Menüpunkt „Enlighter“ mit drei Karteireitern.

Der erste Reiter „Aussehen“ beschreibt die Darstellung  des Sourcecodes. Es können Standardsprache, Standarddesign, Leerschritte bei Tab und weitere Details eingestellt werden.

Der zweite Reiter „Options“ ist technischer Natur. Hier kannbestimmt werden, welche CSS- und JS-Dateien eingebunden werden sollen und auf welche Weise. Ich habe Enlighter-CSS und Enlighter-JS eingebunden, auf externe Themes verzichtet, lasse die Mootools-Dateien über die WP-Seite einbinden und binde die JS-Dateien über den Footer ein.

Zudem kann in der Version 2.7. auf die Funktionen des PlugIns Cryptex Email Address Obfuscation vom selben Autor zugegriffen werden. Das PlugIn ersetzt Mailadressen auf der Internetseite durch Images. Ein kurzer Test zeigte auf meiner Seite keine Wirkung. Da ich an der Zusatzfunktion sowieso kein besonderes Interesse habe, wurde die Funktion sofort und ohne weitere Überprüfung wieder deaktiviert.

Den dritten Reiter „Advanced“ habe ich habe ich nur die Language-Sprachcodes ausgeschaltet, ansonsten habe ich nichts verändert. Ein Punkt, dem man möglicherweise Beachtung schenken sollte, ist die Reihenfolge im Aufruf des WpAutoP-Filters, der für die Umwandlung von doppelten Zeilenumbrüchen in Absätze [html]<p> … </p>[/html] zuständig ist. Ich habe es bei der Standardeinstellung belassen und es funktioniert alles problemlos.

Eingabe des Sourcecodes
Nach Installation und Konfiguration soll die neue Errungenschaft auch genutzt werden. Auch das ist ein simpler Vorgang. In der Iconleist im Kopf des Editors erscheinen zwei neue Icons. Nur eines davon ist anklickbar un döffnet einen neuen DialogSoll in einem Post ein Sourcecodebereich eingefügt werden, genügt ein Klick auf das Icon und es erscheint ein neues Menü. Hier kann die genutzte Programmiersprache (der in der Konfiguration ausgewählte Standard ist vorausgewählt), der Mode (es kann Blockcode oder Inlinecode erstellt werden), die linksseitige Einrückung (ich habe keinen Unterschied mit und ohne Auswahl des Punkts endecken können) und das „umgeben mit Leerzeichen“ (auch hier habe ich keine Auswirkung feststellen können).

Das wichtigste Eingabefeld – das für den Sourcecode – findet sich am Ende des Formulars. Hier kann der Sourcecode direkt eingegeben werden.

Nach einem Klick auf „Okay“ erscheint ein Sourcecodebereich im Editor, der dort weiterhin bearbeitet werden kann. Bei einem Klick in den Sourcebereich taucht (sofern das Browserfenster breit genug ist) ein weiteres Icon auf.  Es entspricht dem zweiten, anfangs ausgeblendeten Icon in der Iconleiste des Editors und erlaubt weitere Einstellungen, wie z.B. das Anzeigen von Zeilennummern, das Festlegen der Startnumer, die Eingabe der Zeilennummern, die hervorgehoben dargestellt werden sollen. Zudem könnne die Id des Codeblocks und der Titel festgelegt werden.

Wer einfach nur schnell einen Sourcecode anzeigen möchte, kann dies auch durch Shortcodes tun. Diese bestehen aud einem Kürzel für die verwendete Programmiersprache also „html“ -natürlich in eckigen Klammern- für einen HTML-Sourcecode.

Hier ein kleines Beispiel für einen HTML-Sourcecode. Ich habe den Titel „Mein Sourcecode“ vergeben, die Nummerierung beginnt bei 5 und die Zeile 7 soll hervorgehoben werden (Achtung, es müssen Identifier und Title angegeben werden, sonst wird der Titel nicht angezeigt):

<ul class="top-menu">
  <li><a href="<?php get_site_url(); ?>/category/blog/">Blog</a></li>
  <li class="secondary"><a href="<?php get_site_url(); ?>/kontakt">Anfrage</a></li>
</ul>

Fazit
Das PlugIn überzeugt mich durch seine einfache Einrichtung und Handhabung, sowie die Pflege durch den Programmierer. Etwas unangenehm ist der Umstand, dass ein nachträgliches Kopieren innerhalb des als Sourcecode dargestellten Blocks im visuellen Editorsofort einen neuen Block erzeugt. Es entstehen beim Kopieren aus einem Sourcecodeblock in einen anderen (oder denselben) zwangsläufig neue Blöcke. Auch muss nach dem Einfügen eines Sourcecodes am Ende des Textes in den Textmodus gewechselt werden, wenn nach dem Sourcecodeblock weiterer Text eingefügt werden soll.

Die paar Kleinigkeiten stören im täglichen Gebrauch ein wenig, so dass ich einen Smiley in der Bewertung abziehe.

Meine persönliche Bewertung:

Link zur PlugIn-Seite: http://enlighterjs.andidittrich.de

Vielen Dank für’s Lesen!