Syntax Highlighting in Wordpress
Mit dem sogenannten Syntax Highlighting, also der Syntaxhervorhebung, ist es möglich mit Hilfe des Pre-Tags Code-Fragmente bzw. Blöcke von Code in einem Beitrag unterzubringen und korrekt anzuzeigen. Programmierer benötigen das Syntax Highlighting beispielsweise, um Code Snippets nicht nur darzustellen, sondern eben auch korrekt zu markieren. Diese farbliche Markierung sorgt dafür, dass Code besser lesbar und logischer wird, da einzelne Fragmente und Teile in bestimmten Farben angezeigt werden, je nach Programmiersprache unterschiedlich. Das ist mal mehr und mal weniger wichtig.
Gerade bei kompliziertem oder langem Code, sorgt das Syntax Highlighting aber dafür, dass er wesentlich verständlicher und besser wahrnehmbar wird. Doch wie lässt sich die Syntaxhervorhebung in Wordpress realisieren? Plugins dafür gibt es viele, doch die integrieren meist große Bibliotheken oder Shortcodes, was sie ineffizient macht oder sogar zum Problem führt, solltet ihr das Plugin mal wechseln oder deaktivieren wollen. Eine Lösung die sehr minimalistisch und äußerst performant ist, habe ich selbst vor kurzem ausgiebig getestet und genau diese möchte ich euch nun noch einmal genauer vorstellen. Im Grunde ist die Umsetzung denkbar einfach, vor allem ist sie aber performanter als entsprechende Plugins.
Automatisches Syntax Highlighting ohne Plugin
Info: Code-Fragmente werden in diesem Beispiel mit dem Pre-Tag, also <pre>code</pre> angelegt. Diese Tags wandeln wir nun so um, dass sie das Syntax Highlighting nutzen und automatisch korrekt ausgegeben werden. Fangen wir also direkt mal an.
1. Als erstes muss dafür das Script Prettify in den Blog integriert werden. Das Script stammt von Google himself und kann auch direkt von Google eingefügt werden, sodass ihr selbiges nicht vom eigenen Server laden müsst, sondern direkt vom Google CDN einbindet. Am besten ganz unten in die footer.php einfügen, vor dem </body>, um sicherzugehen, dass es wirklich als letztes geladen wird und keine anderen Ressourcen blockiert.
<script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
2. Das Script ist nun integriert und Syntax Highlighting damit kein Problem mehr. Doch leider hat Wordpress so seine Probleme mit den Pre-Tags, weshalb diese ebenfalls angepasst werden müssen. Als erstes sorgen wir mit dem folgenden Snippet, welches in die functions.php kopiert werden muss, dafür, dass Sonderzeichen etc. nicht mehr umgewandelt werden. Das ist wichtig, da Code-Fragmente sonst mehr oder weniger unmöglich werden.
function pre_esc_html($content)
{
return preg_replace_callback('#(<pre.*?>)(.*?)(</pre>)#imsu', create_function('$i', 'return $i[1].esc_html($i[2]).$i[3];') , $content);
}
add_filter('the_content', 'pre_esc_html');
3. In Schritt 3 lösen wir nun das Problem, dass wir die Pre-Tags nicht von Hand ändern oder markieren müssen. Damit das Syntax Highlighting mit Prettify nämlich funktioniert, muss zu jedem Tag die Klasse “class=”prettyprint”” hinzugefügt werden. Wenn ihr das von Hand macht, ist die Klasse fest im Code integriert und falls ihr dann mal wechseln wollt, euch für ein Plugin entscheidet, oder kein Syntax Highlighting mehr benötigt, bleibt die CSS-Klasse im Code bestehen. Vorhandene Pre-Tags werden außerdem nicht korrekt angezeigt, da die Klasse dort nicht vorhanden ist. Damit das nicht passiert, erledigen wir dies nun dynamisch mit einem kleinen Snippet. Das fügt zu allen Pre-Tags die gewünschte Klasse hinzu und sorgt somit dafür, dass Prettify den Code erkennt und das Syntax Highlighting aktiviert.
function pre_highlight($content)
{
return str_replace('<pre>', '<pre class="prettyprint"> ', $content);
}
add_filter('the_content', 'pre_highlight');
4. Fertig. Das Script wird nun korrekt geladen und dank des Snippets wandeln sich Sonderzeichen nicht mehr um. Außerdem wird die Klasse für Prettify automatisch zum Pre-Tag hinzugefügt, sodass alle Pre-Tags nun über das gewünschte Syntax Highlighting von Prettify verfügen.
5. Die Pre-Tags verfügen nun über eine neue Klasse und können via CSS frei gestaltet werden, der alte Pre-Selektor funktioniert nicht länger. Ein Beispiel für diese Gestaltung, mitsamt Linien als Hintergrund, habe ich hier schon einmal für euch angelegt. Einfach folgendes in eure CSS kopieren und darauf achten, dass keine andere Klasse den Code oder die Pre-Tags überschreibt.
pre.prettyprint
{
font:12px/20px monospace;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAIAAACw1AcgAAAAE0lEQVR4AWP4+fMXVfH///+piQG9yHY1zYXQQAAAAABJRU5ErkJggg==);
border:0 !important;
padding:0 0 20px !important;
margin:0 0 25px;
overflow:hidden
}
pre.prettyprint:hover
{
overflow:auto
}
Hinweis: Nach wie vor ist die Ausgabe im Visuellen Editor etwas “buggy” und wandelt verschiedene Code-Framente immer noch um. Das ist allerdings kein großes Problem. Code-Fragmente einfach immer im Text Editor von Wordpress hinzufügen und auch so abspeichern, da allein der Wechsel den Code umwandelt und zerstören kann (je nachdem welche Programmiersprache es ist). Also einfach im visuellen Editor den Artikel komplett fertig schreiben und erst ganz am Ende in den Text Editor wechseln, dort die Pre-Tags setzten und den Code von Hand einfügen und speichern. Danach nicht mehr in den visuellen Editor wechseln, da bestimmte Fragmente eben nach wie vor umgewandelt werden könnten.
Syntaxhervorhebung mit kleinem Workaround
Der kleine Workaround am über den Text Editor ist leider notwendig, bietet sich aber sowieso an, da der Code hier viel besser geschrieben und formatiert werden kann, ohne sich zu verschieben etc. das “Problem” ist im Grunde also gar kein Problem. Mit dieser einfachen Möglichkeit nutzt ihr die Pre-Tags von Wordpress, um effektiv und mit korrektem Syntax Highlighting Code-Fragmente in eure Beiträge einzufügen. Sehr nützlich für alle die sich mit Programmierung oder ähnlichem beschäftigen.
Der Vorteil gegenüber den fetten Syntax Highlighting Plugins liegt wie immer in der Performance, denn diese Lösung hier ist minimal und dennoch von großem Wert. Meiner Ansicht nach geht Syntax Highlighting in Wordpress nicht performanter und bevor ihr eine extra Erweiterung für die Syntaxhervorhebung installiert, solltet ihr erst einmal diese Lösung ausprobieren.
