TYPO3 Code Highlighting mit CKEditor und Prism

Da ich hier im Blog ab und zu Beispielcode habe benutze ich seit längerem die TYPO3 Extension beautyOfCode von Felix Nagel. Damit bin ich sehr zufrieden aber die Möglichkeit das ohne extra Extension und Content Element zu haben hat mich dann doch gereizt .

Einbindung in CKEditor

Der CKEditor hat eine mitgelieferte Core Erweiterung namens codesnippet. Diese wird in der Konfiguration unter extraPlugins freigegeben und in der toolbar mit 'CodeSnippet' angezeigt.  Die Plugin Konfiguration ist übersichtlich:

codeSnippet_theme: 'obsidian'
codeSnippet_languages:
  bash: 'Bash'
  html: 'HTML'
  json: 'Json'
  javascript: 'JavaScript'
  php: 'PHP'
  css: 'CSS'
  scss: 'Scss'
  typoscript: 'TypoScript'
  yaml: 'Yaml'

Mit codeSnippet_theme wird das gewünschte Theme angegeben, mit  codeSnippet_languages die benötigten Sprachen.

Prism Highlighter

Unter http://prismjs.com/download.html findet ihr die Möglichkeit die Themes, Sprachen und Plugins zusammenzuklicken. In der fertigen prism.js steht am Anfang die verwendete Zusammenstellung als Link. Für meine Konfiguration ist das: http://prismjs.com/download.html?themes=prism-okaidia&languages=markup+css+clike+javascript+bash+php+php-extras+sass+scss+sql+yaml&plugins=line-highlight+line-numbers+toolbar+copy-to-clipboard

Das Paket habe ich unter Resources > Public > Vendor entpackt und mit TypoScript eingebunden:

page {
   includeCSS {
      prism = EXT:tksite/Resources/Public/Vendor/Prism/prism.min.css
   }
   includeJSFooter {
      prism =  EXT:tksite/Resources/Public/Vendor/Prism/prism.min.js
      prism-typoscript =  EXT:tksite/Resources/Public/Vendor/Prism/prism-typoscript.min.js
   }
}

Die prism-typoscript.min.js stammt von hier: https://github.com/ervaude/fs_code_snippet/blob/master/Resources/Private/JavaScript/prism-typoscript.js.

Das ganze gefällt mir ganz gut und ich werde es weiter benutzen.