highlight.js – Code-Highlighting der schlanken Art

Ein Code-Highlighter-Plugin für WordPress habe ich schon lange nicht mehr gesucht oder verwendet. Einst war es Crayon, der mir allerdings viel zu umfangreich war. Was ich nicht möchte, sind Highlighter die ihre Skripte überall laden, auch wo gar kein Code abgebildet wird. Auf aufgeblähtes Markup verzichte ich ebenso gerne wie auf Tabellenlayouts. Ich will auch keine Shortcodes einsetzen müssen, kryptische CSS-Klassen verwenden, oder mannigfaltige Optionen und x Funktionen für die Codeabschnitte, die zu markieren und zu kopieren auch ohne das keine unbillige Herausforderung darstellen dürfte.

Das Abbilden von Code-ist im Grunde bereits mit dem dafür vorgesehenen HTML-Markup erledigt, ohne Plugin und zusätzliche Skripte. Dafür gibt es das Pre-Tag (Block / Abschnitte) und das Code-Tag (Inline). Dieses pragmatische Vorgehen stellt Code-Abschnitte in einer Monotype-Schrifttyp dar. Und tatsächlich sieht das ganze doch etwas monoton aus.

Die schlanke Beschaffenheit von highlight.js ist genau, was ich mir für ein Werkzeug zur visuellen Aufbereitung von Codepassagen vorstelle.

Auf der Website den Get version ...-Button drücken, die gewünschten Skript-Sprachen auswählen, Paket herunterladen, CSS auswählen, einbinden, initialisieren…

jQuery(document).ready(function($) {
    $('pre code').each(function(i, block) {
        hljs.highlightBlock(block);
    });
});

…Snippets veröffentlichen.

Alles, was zwischen pre- und code-Tags steht, (das code-Tag bekommt die Klasse der abgebildeten Skriptsprache) wird nun automatisch gehighlighted.

<?php
    echo 'Hello World';
?>

Nachtrag 08.09.2022: das Plugin wird in diesem Blog mittlerweile nicht mehr verwendet, auch sonst kein Code-Highlighting mehr.