Für diese Webseite hier habe ich ein Content-Element erstellt, dass es mir erlaubt Code-Blöcke zu schreiben und die Sprache für das Syntax-Highlighting zu definieren. Das Ganze habe ich nun in eine eigene Extension überführt, damit auch andere was davon haben.

Was kann die Extension?

Die Extension fügt ein Content-Element names "Code-Block" hinzu. Wählt man diesen aus, so bekommt man in etwa die Ansicht, wie das HTML-Content-Element von TYPO3 mit dem Zusatz eines Select-Feldes für die Auswahl der Programmier/Hightlight-Sprache.

Die Extension funktioniert sowohl mit css_styled_content, sowie mit fluid_styled_content und ist von mir in Version 7.6+ und 8.7+ getestet. Eine lauffähige 9.5 habe ich bisher nicht getestet, sehe da aber kein Problem.

Installation

Installieren lässt sich die Extension auf dem alten Weg aus dem Git-Repository:

oder mit composer

Es gibt eine Option, die man im Konstanten-Editor setzen kann. Hier kann man entscheiden, ob man die Prismjs Dateien einbinden möchte, oder nicht. 

Folgende Sprachen habe ich bei meinem Plugin eingebunden:

• HTML
• CSS
• SASS
• SQL
• PHP
• TYPOSCRIPT
• BASH

Prismjs selbst unterstützt noch mehr Sprachen. Wer das möchte, kann sich einfach eine eigene prismjs generieren lassen und die Optionen im Select für die Programmier-Sprache erweitern.