ghost und prism.js

Wenn ich als Software-Entwickler hier Text schreibe, brauche ich oft die Möglichkeit Code-Schnipsel in ghost elegant darzustellen. Das kann in ghost leicht erledigt werden. Dazu gibt man drei Backticks (`) gefolgt vom Namen der Sprache ein. Es erscheint ein grün markiertes Fenter in das man seinen Code eintippen oder einfügen kann. Was allerdings fehlt ist eine Colorierung. Dazu kann man Prism.js leicht über Code-Injection einfügen. Wie das geht ist im folgenden Tutorial beschrieben:

A complete guide to code snippets

Developers write code. Some developers write about writing code. But when they try to share that code on the web, everything that makes code more readable – like formatting and syntax highlighting – is gone!

TutorialsTeam Ghost

Dieser Artikel ist entstanden, weil ich mir das Leben zunächst unnötig schwer gemacht hatte. Um Prism.js zu integrieren hatte ich in dem von mir verwendeten Theme (Edition) die Datei <ghost-Verzeichnis>/content/themes/edition/default.hbs modifiziert.

Vor dem Ende des head-Tags hatte ich eine Referenz auf das Stylesheet eingefügt:

<link href="https://cdn.jsdelivr.net/npm/prismjs@1/themes/prism.css" rel="stylesheet" />

Und vor dem Ende des body-Tags hatte ich Referenzen auf den Prism-Code eingefügt. Das war eine Anregung von ChatGPT.

<script src="https://cdn.jsdelivr.net/npm/prismjs@1/prism.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1/plugins/autoloader/prism-autoloader.min.js"></script>

Mit diesen Änderungen und einem Neustart des ghost konnte Prism.js dann in ghost verwendet werden.

ghost restart
sudo systemctl restart blubb

Die im oben referenzierten Tutorial beschriebene Lösung ist etwas einfacher und wird mit Bordmitteln (Code-Injection) erledigt. Also ist sie eher zu empfehlen, aber es ist sicherlich gut, hier zu sehen, wie man ein Theme auf neue Bedürfnisse anpassen kann. 😊