Turais

Code syntax highlighting

johannes -

Ich bin ja von der Ghost-Blogging Platform begeistert, Syntax Highlighting hat mir aber gefehlt. Hier eine kleine kurze Beschreibung wie Ihr Syntax-Highlighting in eurem Ghost Blog mit dem Standard Theme aktiviert. Das ganze hier ist inspiriert von: Dave Balmer.

Kleine Demo:

#include <stdio.h>

int main (int argc, const char *argv[]) {
    printf("Hello World! \n");
}

Prism installieren

Für das obige Beispiel benutze ich Prism.js. Ladet euch dazu erstmal euer individualisiertes Prism.js wie das css herunter.

  • Kopiert die js Datei in ghost/content/themes/casper/assets/js und die css Datei in den css Ordner.
  • Ändert die ghost/content/themes/casper/default.hbs, und fügt folgendes hinzu:
    Am Anfang der Datei nach dem <head> Tag:
 {{! Externe Skripte }}
    <link rel="stylesheet" type="text/css" href="{{asset "css/screen.css"}}" />
    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic|Open+Sans:700,400" />
    <link rel="stylesheet" type="text/css" href="{{asset "css/prism.css"}}" />

Tipp: Als Font könnt ihr auch eure eigene freie Font verwenden, welche ihr in dem font-Ordner ablegt.
Am Ende, bei The main JavaScript file ... fügt ihr noch eine Referenz auf eure prism.js hinzu.

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

Falls ihr Ghost im Production Mode gestartet habt, müsst ihr Ghost noch neu starten. Ich benutze init.d, bei mir ginge das so: service ghost restart

Ghost mit Prism benutzen

Das ganze benutzt man dann in etwa so:

```language-c
int foo = 5; ```

Das wird dann so aussehen:

int foo = 5;

In der Ghost-Preview funktioniert das ganze leider nicht.