Syntax Highlightning in Ghost

2015-07-04

Dieses Blog läuft auf der Blogging Plattform Ghost. Statt HTML oder einem Rich Editor der HTML erzeugt, werden die Artikel in Markdown geschrieben. Markdown ist eine einfache Auszeichnungssprache, welche sich vor allem in der Welt der Softwareentwickler verbreitet hat. Was mir bei der Kombination Ghost + Markdown gefehlt hat, war eine einfache Methode Syntax Highlightning einzubinden. Doch diese Funktionalität lässt sich ohne großen Aufwand nachrüsten. Es gibt einige Möglichkeiten…ich habe mich für prism.js entschieden. Dabei handelt es sich um eine Javascript Bibliothek die ein Highlightning für sehr viele Sprachen bereitstellt. Folgende Schritte sind notwendig:

Auf prismjs.com die benötigten Sprachen und Features auswählen und herunterladen
Die Dateien prism.js und prism.css im Ghost Theme Ordner unter ghost\themes\<theme>\assets\js bzw. ghost\themes\<theme>\assets\css ablegen
Die Datei default.hbsunter ghost\themes\<theme>\ um die beiden Zeilen

<link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

und

<script type="text/javascript" src="{{asset "js/prism.js"}}"></script>

an folgenden Postionen erweitern:

<!DOCTYPE html>
<html>
<head>
    {{! Document Settings }}
    ...

    {{! Page Meta }}
    ...

    {{! Styles'n'Scripts }}
    ...
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />
    {{! Ghost outputs important style and meta data with this tag }}
    {{ghost_head}}
</head>
<body class="{{body_class}} nav-closed">
    ...

    {{! Ghost outputs important scripts and data with this tag }}
    {{ghost_foot}}

    {{! The main JavaScript file for Casper }}
    <script type="text/javascript" src="{{asset "js/prism.js"}}"></script>
    ...
</body>
</html>

Und schon kann mit

 ```language-javascript 
 var msg = 'pikodat rockt!';
 alert(msg);

folgender Code Block generiert werden:

var msg = 'pikodat rockt!';
alert(msg);

Eine Info am Ende, die mich reichlich Nerven gekostet hat: Das Highlightning funktioniert nur in dem Artikel selbst. Fängt der Blog Eintrag mit dem Code Bereich an, funktioniert das Highlightning in der Vorschau auf der Übersichtsseite nicht.