Prism, CKEditor, TYPO3

Add Syntax Highlighting with Prism.js to TYPO3 / CKEditor

Enable syntax highlighting for code snippets inserted in CKEditor by using the built-in "codesnippet" plugin and Prism.js.

In the Backend

We need to make the code snippet button/functionality available in CKEditor. The plugin itself ships with CKEditor and only needs to be enabled and configured. Add the following part to your YAML configuration for CKEditor. If you do not have a configuration yet, see https://typo3worx.eu/2017/02/configure-ckeditor-in-typo3/

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

editor:
  config:
    extraPlugins:
      - codesnippet

    codeSnippet_theme: 'obsidian'
    codeSnippet_languages:
      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 files the way you usually handle your resources (via TypoScript or your frontend build). Include both the CSS and the JS files for all languages you configured. If you want TypoScript highlighting, you can use this language definition: https://github.com/ervaude/fs_code_snippet/blob/master/Resources/Private/JavaScript/prism-typoscript.js (thanks to Daniel).

Example usage

<pre><code class="language-php">
<?php
$greeting = 'Hello TYPO3 + Prism';
echo $greeting;
</code></pre>

Prism will automatically highlight on DOMContentLoaded. If you inject content dynamically, call Prism.highlightAll() after insertion.