Ich verwende die beautyofcode Extension für die meisten meiner Code-Beispiele. Diese bietet zwei mögliche Plugins für das Syntax-Highlighting: Syntax Highlighter und Prism. Damals habe ich mich für ersteres entschieden.
Aber während ich eine zuverlässige Content Security Policy (CSP) auf dieser Website eingerichtet habe, stieß ich auf das folgende Problem: der Syntax Highlighter war damit nicht mehr verwendbar.
Um Cross-Site-Scripting (XSS) auf der Website zu verhindern, muss man die CSP-Direktive script-src (oder default-src) einrichten, und die Optionen 'unsafe-inline' sowie 'unsafe-eval' dürfen dabei nicht verwendet werden.
Nun war das Problem, dass Syntax Highlighter die JavaScript-Funktion eval() verwendet. Diese Funktion evaluiert einen String als JavaScript-Ausdruck, dies wird als potentielles Einfallstor für XSS-Angriffe betrachtet. Aus diesem Grund wird der Aufruf von der CSP blockiert, wenn 'unsafe-eval' fehlt.
Ein schneller Test zeigte: Prism hat keinerlei Probleme mit der CSP. Und da Prism ebenfalls von EXT:beautyofcode unterstützt wird, bereitete der Wechsel keine Kopfschmerzen.
Ich habe also die TypoScript-Konfigurationen angepasst und auf der offiziellen Website von Prism das aktuelle JavaScript und Styleshet zusammengestellt und heruntergeladen. Oder mir vielmehr ein Monokai-Theme für Prism gesucht, welches ich dann erweitert habe.
EXT:beautyofcode stellt zwar für beide Plugins die notwendigen Dateien bereit, ich hatte diese aber über die Templates entfernt, um den jeweils aktuellen Stand selbst zu integrieren.
Das heruntergeladene JavaScript von Prism wurde meiner footer.js angefügt. Das Prism-Stylesheet habe ich meiner SCSS-Dateistruktur hinzugefügt und nach meinen Vorstellungen angepasst.
Da ich schon einmal dabei war, habe ich das Syntax-Highlighting auch direkt in CKEditor eingerichtet. Thomas Kieslich zeigt euch in seinem Blog, wie dies geht.
Mit dem CKEditor-Plugin "codesnippet" könnt ihr Prism dann bereits nutzen. Falls ihr im Code auch Zeilen farbig hervorheben oder Zeilennummern haben wollt, könnt ihr das Plugin mit einem weiteren ergänzen. Diesen Schritt habe ich vorerst ausgelassen. Wenn ich später die Zeit dazu finde, könnte ich damit sogar EXT:beautyofcode ersetzen.
Weitere Vorteile:
- Syntax Highlighter beinhaltete einen Plaintext-Modus, um den Code zu kopieren. In Chrome führte das schon mal zu Problemen mit falsch kodierten Leerzeichen. Mit Prism lässt sich der Code problemlos kopieren.
- Aus irgendeinem Grund funkionierte der Syntax Highlighter nicht mehr, als ich EXT:min installierte um das HTML zu minimieren. Auch kein Problem mit Prism.