Tutorials

Einige nützliche Hilfen und Code-Schnipsel, die ich immer wieder benötige und deshalb hier für alle sammle.

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:

ERROR: Content Element with uid "3702" and type "ar_codeelem" has no rendering definition!

oder mit composer

ERROR: Content Element with uid "3704" and type "ar_codeelem" has no rendering definition!

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

  • Altan
    Das ist cool, Andre! :) Muss ich mal bei Gelegenheit testen
    Antworten

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.