Und zwar so, dass es schön(er) aussieht und gut zu benutzen ist.  

Ein recht spezieller Beitrag in eigener Sache, sozusagen. Aber ich hatte wegen unschönen Kleinigkeiten länger in den Style Sheet-Dateien herumsuchen müssen – das kann ich vielleicht anderen ersparen.


Motivation

Wenn man wie ich hin und wieder Code-Schnipsel in seinem Ghost-basierten Blog hat, sollen die möglichst schön dargestellt werden, mit Hervorhebungen passend zur benutzten Sprache (bei mir zum Beispiel gern Bash-Skripte). Außerdem wäre auch eine Option für die Leser nett, alles per Klick in die Zwischenablage zu kopieren… bitte sehr: prism.js.[1]

Problem

Leider passte die Lösung von der Stange nicht ganz perfekt zu meinem (leicht angepassten) „Casper“-Theme: Die Boxen ragten links und rechts über die Seiten, passten sich nicht der Seitenbreite an – sie waren auf kleineren Bildschirmen also nicht wirklich benutzbar, und von responsivem Design konnte keine Rede sein.

Lösung

Aber von vorn: Zunächst muss hier die gewünschte Variante heruntergeladen werden. (Das ist aus Datenschutzsicht gegenüber dem Einbinden von Drittquellen eh vorzuziehen.) Der Link liefert gleich meine Auswahl – das gut passende „Coy“-Thema mit zusätzlicher Sprachunterstützung für Bash und Markdown, sowie der Copy-to-clipboard-Erweiterung. Nach Bedarf anpassen. Man bekommt zwei Dateien: prism.css und prism.js.

Änderungen in prism.css

Damit die Code-Boxen sich schön in die Textbreite einfügen, reichen die beiden folgenden zusätzlichen Zeilen für max-width und min-width. Weiterhin fand ich die Schriftgröße für den Code zu groß:

div.code-toolbar {
	position: relative;
    max-width: 100%;
    min-width: 100%;
    font-size: 75%;
}

Die folgende Ergänzung ist optional, falls man eine eigene, zum Design passende Schriftart für den „Kopieren“-Button benutzen möchte (das muss natürlich nicht Alegreya Sans sein):

div.code-toolbar > .toolbar .toolbar-item {
	display: inline-block;
    font-family: "Alegreya Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Open Sans","Helvetica Neue",sans-serif;
}

Änderungen in prism.js

Wie erwähnt, versuche ich auf unnötiges Einbinden von Drittquellen zu verzichten (weil Datenschutz, wissenschon). Deshalb habe ich auch die Abhängigkeit clipboard.js heruntergeladen und in Ghost unter assets/js gespeichert. Damit nicht mehr Cloudflare benutzt wird, diese Zeile in der prism.js-Datei

script.src = 'https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js';

durch diese ersetzen:

script.src = '/assets/js/clipboard.min.js';

Bzw. den entsprechenden Teil in der Minified-Version

o.src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.0/clipboard.min.js",'

ersetzen durch:

o.src="/assets/js/clipboard.min.js",

Schließlich habe ich auch noch die Texte für die Kopier-Buttons übersetzt, also

  linkCopy.textContent = 'Copy';
(…)
  linkCopy.textContent = 'Copied!';
(…)
 linkCopy.textContent = 'Press Ctrl+C to copy';
(…)
  linkCopy.textContent = 'Copy';

jeweils durch 'Kopieren', 'Kopiert!', etc. ersetzt. In der Minified-Version:

(…)
return t.textContent="Kopieren",r?o():i.push(o),t;function o(){var o=new r(t,{text:function(){return e.code}});o.on("success",function(){t.textContent="Kopiert!",n()}),o.on("error",function(){t.textContent="Strg+C zum Kopieren",n()})}function n(){setTimeout(function(){t.textContent="Kopieren"},5e3)}})}else console.warn("Copy to Clipboard plugin loaded before Toolbar plugin.")}();

Upload

Dann bloß noch die beiden fertigen Dateien auf den Webspace in die Ordner
<Ghost Installation>/content/themes/<aktives Theme>/assets/css bzw. …/js hochladen.

Code Injection in den Ghost-Einstellungen

Um die neuen Script- und Stylesheet-Dateien einzubinden, kann man die „Code Injection“-Funktionalität im Ghost-Editor benutzen. Dazu die beiden Zeilen ins globale Site Footer-Feld oder ins Post Footer-Feld des jeweiligen Beitrags kopieren, je nachdem, ob man die Dateien immer ausliefern will (einfacher) oder nur, wenn's nötig ist (eleganter, aber man muss auch dran denken…):

<script src="/assets/js/prism.js"></script>
<link rel="stylesheet" type="text/css" href="/assets/css/prism.css" />

Titelfoto: Markus Spiske / Unsplash


  1. Gibt auch noch andere, beispielsweise highlight.js. Habe ich bisher nicht probiert. ↩︎