highlight.js – Syntax Highlighting in Wordpress ohne Plugin

Ich weiß nicht genau warum, aber es gibt recht wenige gute Wordpress-Plugins die vernünftiges Syntax-Highlighting von Quellcode ermöglichen. Bisher griff ich auf Syntax Highlighter Evolved zurück. Richtig zufrieden war ich damit allerdings nicht, da ich permanent das Gefühl hatte mit Kanonen auf Spatzen zu schießen. Darüber hinaus ist das von Syntax Highlighter Evolved generierte HTML-Markup viel zu aufgeblasen und altbacken – es werden Table-Layouts verwendet – Hallo?!
Der größte Nachteil: die Seitenladezeit erhöht sich erheblich – besonders durch die Flash-basierte Lösung, die erlaubt den angezeigten Quellcode automatisch in die Zwischenablage zu kopieren.

Als vielversprechende Alternative bot sich highlight.js an. Kein Wordpress-Plugin sondern eine kleine JavaScript-Bibliothek, die momentan den Quellcode von 51 Programmiersprachen automatisch erkennen und farblich hervorheben kann.
Man muss dazu nur den gewünschten Code in die dafür vorgesehenen HTML-Tags <pre><code> verpacken, den Rest erledigt highlight.js.

Hier ein kleines Beispiel:

<!doctype html> 
<html> 
    <head>
        <script type="text/javascript" >
            function helloWorld() {
                var message = "Hello world!";
                alert(message);
            }
        </script>
        <style type="text/css" >
            body {
                font-family: sans-serif;
            }
        </style>
    </head>
    <body>
        <h1>highlight.js</h1>
    </body>
</html>

Genau was ich brauche – nicht mehr und nicht weniger.

highlight.js – Syntax-Highlighting per JavaScript

Veröffentlicht am