Einen guten und leichtgewichtigen Syntax-Highlighter zu finden, war nicht ganz so einfach, wie ich es mir gedacht hatte.
Der ersten Highlighter, den ich installiert hatte, war Crayon. Und es ist zweifellos der schönste, komfortabelste und der mit den meisten Features von allen. Aber leider ist er auch ziemlich ressourcenhungrig, zu ressourcenhungrig für meinen Geschmack. (Der P3 Profiler ist ein ganz hervorragendes Plugin, um so etwas herauszufinden.)
Der nächste, den ich ausprobiert habe, war WP-GeSHi-Highlight. Auch sehr schön, aber etwas weniger schön als Crayon, und dabei nur minimal ressourcenschonender als dieser.
Der dritte war der Mivhak Syntax Highlighter. Endlich ein leichtgewichtigerer Highlighter, aber insgesamt etwas „schief“, unausgereift, z. B. seltsamerweise fehlende Unterstützung für so grundlegende Dinge wie Bash (Shell script).
Auf den vierten Versuch scheine ich den richtigen erwischt zu haben: Prism
Prism ist kein 1-Klick-Install-Plugin, man muss (darf) zuerst auf der Konfigurationsseite ein Theme aussuchen, die gewünschten Highlight-Sprachen und optional Zusatzfeatures.
Man kann aus sechs Themes und ungefähr 60 Sprachen (Syntaxen) wählen. Nach der Auswahl lassen sich das Custom-CSS und das Javascript runterladen. Das hat den sympathischen Vorteil, dass man ein wirklich schmales Paket erhält, mit nur den Dingen, die man auch wirklich braucht. Mein Prism-CSS hat 3K, das JS-File 15K, mit 11 Sprachen und einem Extra-Feature.
Nach dem Download kopiert man die beiden Files in den Child-Theme-Ordner und fügt diese Zeilen im functions.php hinzu:
<?php
function add_prism() {
// Register prism.css file
wp_register_style(
'prismCSS', // handle name for the style so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/prism.css' // location of the prism.css file
);
// Register prism.js file
wp_register_script(
'prismJS', // handle name for the script so we can register, de-register, etc.
get_stylesheet_directory_uri() . '/prism.js' // location of the prism.js file
);
// Enqueue the registered style and script files
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');
?>
Das wars schon, und das Ganze ist völlig einfach handzuhaben:
- Um Prism für einen bestimmten Code-Block zu aktivieren, muss man lediglich eine Klasse zum
code-Tag hinzufügen, z. B.<pre><code class="language-php">. - Um im Text eingestreuten Inline-Code zu highlighten, umschließt man den Absatz (oder ganzen Text) mit einem
div, z. B.<div class="language-markup"> … </div>.
Angenehmerweise funktioniert alles mit standardkompatiblen Tags. Man muss also nicht alles umschreiben, wenn man in der Zukunft das Plugin irgendwann mal nicht mehr nutzen will.
Selten passiert es, dass das Highlighting nicht 100%-ig akkurat ist, aber das würde ich als vernachlässigbar bezeichnen. Nicht jedes der Extra-Features funktioniert reibungslos mit jedem Highlight-Theme, z. B. scheinen momentan die Zeilennummern (optionales Feature) nicht mit dem Standard-Theme zu funktionieren, mit den anderen Themes schon. Aber das Javascript scheint recht leicht anpassbar zu sein.
Alles in Allem, für mich ist das im Moment der (fast) perfekte, und dabei super-lightweight, Syntax-Highlighter!
Und natürlich funktioniert er nicht nur mit WordPress.
Falls du beim Einrichten auf irgendwelche Schwierigkeiten stößt, gibt es ein sehr gutes Setup-Tutorial für WordPress von einem anderen User (auf Englisch).