Prism, CKEditor, TYPO3

Add Syntax Highlighting with Prism.js to TYPO3 / ckeditor

Enable syntax highlighting for code snippets inserted in CKeditor by using the "codesnippet" plugin and prism.js.

In the Backend

We need to make the code snippet button / functionality available in ckeditor. The plugin itself is part of ckeditor already and does not need to be installed, just configured. Add the following part to your yaml configuration for ckeditor. If you do not have a configuration yet, see

With that configuration you enable the source code button in ckeditor, define the available languages and the theme (see for available themes and options)

File: public/typo3conf/ext/site/Configuration/RTE/Default.yaml


       - codesnippet

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

In the frontend

Add the prism.js JavaScript and CSS file the way you usually handle your resources, via TypoScript or add it to your frontend build chain. Include both the CSS and the JS files for all languages you configured. If you want TypoScript highlighting you can find a JavaScript file at prism-typoscript.js (thanks to Daniel).