Zurück zur Übersicht

TYPO3: Code-Block Content-Element mit Syntax Highlighting

#Tutorials #TYPO3

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.

Kompabilität

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:

git clone https://github.com/andreknieriem/codeelement.git

oder mit composer

composer require andrerinas/codeelement

Optionen

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.


Kommentare

Es gibt noch keine Kommentare. Sei der Erste!

Hinterlasse einen Kommentar

Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Kommentar wird gespeichert
Danke für deinen Kommentar! Sobald er freigegeben wurde erscheint er hier.