Da ein Großteil meiner Artikel über die programmiertechnische Lösung verschiedener Probleme handelt, ist die Möglichkeit zum Darstellen von Quellcode mit Syntaxhervorhebung nahezu unerlässlich. Die Lösung dafür ist meist ein komplexes CSS-Regelwerk. So auch im Fall von highlightjs. Wie man diese Bibliothek benutzt, ist Inhalt des achten Teils der Artikelserie zur Automatisierung dieser statischer Webseiten.

Die Bibliothek highlight.js besteht aus einer Javascript-Datei und verschiedenen, in CSS definierten, Styles. Der Style definiert die Farben der Syntaxhervorhebung und was überhaupt hervorgehoben wird. Auf der Homepage von highlightjs kann man die verschiedenen Styles ausprobieren und sich danach ein Downloadpaket zusammenstellen. Dabei muss man angeben, welche Sprachen und welche Styles unterstützt werden sollen. Ich persönlich finde den Style “googlecode” am Besten, aber es differiert von Sprache zu Sprache.

Hat man die benötigten Dateien heruntergeladen und auf den Webspace hochgeladen, muss man diese in der HTML-Datei referenzieren sowie das Skript starten. Dies zeigt der folgende Codeblock.

<link rel="stylesheet" href="/css/libs/googlecode.css">
<script src="/js/libs/highlight.pack.js"></script>
<script>
    hljs.initHighlightingOnLoad();
</script>

Die Funktion initHighlightingOnLoad aus der Datei highlight.pack.js sucht standardmäßig nach allen < pre >< code >..< /pre > Blöcken (Leerzeichen zur Verhindung des Renderns vorhanden!) und wendet den geladenen Style auf den Inhalt an. Über das Attribut class="html" kann die Sprache angegeben werden, da die automatische Erkennung nicht immer gut funktioniert. Und das ist schon alles.

Während meinen ersten Tests habe ich jedoch gemerkt, dass ein einfachen Kopieren und Einfügen vom Editor seiner Wahl in das HTML-Dokument doch ein Problem mit sich bringt. Will man HTML-Code einfügen, dann führen vorhandene HTML-Syntax spezifische Schlüsselzeichen wie beispielsweise < zu Fehlern beim Rendern der Webseite durch den Browser. Um dieses Problem zu lösen, müssen die entsprechenden Zeichen durch die HTML-Entsprechung ersetzt werden. Dies zeigt der folgende Python-Codeblock.

codePattern = "<pre(?s)><code(?s)(.*?)</ code></pre>" # Leerzeichen vor "code" weglassen
codeSnippetPattern = "(?<=\">)(?s)(.*?)(?=</ code>)" # Leerzeichen vor "code" weglassen

def fixCodeSnippets(content):
    for result in re.finditer(codePattern, content): #iterate over each code snippet
        wholePre = result.group()
        code = re.search(codeSnippetPattern, result.group())
        if code:
            wholeCode = code.group()
            wholeCodeFixed = wholeCode
            wholeCodeFixed = wholeCodeFixed.replace("<","<")
            wholeCodeFixed = wholeCodeFixed.replace(">",">")
            wholeCodeFixed = wholeCodeFixed.replace("\"",""")
            wholeCodeFixed = wholeCodeFixed.replace("\'","'")
            wholePreFixed = wholePre.replace(wholeCode,wholeCodeFixed)
            content = content.replace(wholePre, wholePreFixed)            
    return content

Zunächst sucht die Methode finditer im Modul re nach allen < pre >< code >..< /pre > Blöcken und iteriert gleich über die Suchergebnisse. Danach wird der Text innerhalb des Codeblocks extrahiert und die betreffenden Sonderzeichen durch die HTML-kompatiblen Zeichen ersetzt.

Durch highlight.js wird die Syntaxhervorhebung deutlich vereinfacht. Für kleine Codeblöcke ist es ideal, wenn allerdings längere Codeabschnitt gezeigt und erklärt werden sollen, fehlt leider die Funktion für Zeilennummern. Im nächsten Artikel beschreibe ich, wie die RSS-Feeds für meine Artikelsammlung voll automatisiert entstehen. Vielen Dank fürs Lesen!

Vorheriger Beitrag der ReiheNächster Beitrag der Reihe

zurück