Loading ...

What's your function in life?

Ours is writing random blog articles about web development, TYPO3 and more.

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 https://typo3worx.eu/2017/02/configure-ckeditor-in-typo3/ 

With that configuration you enable the source code button in ckeditor, define the available languages and the theme (see https://prismjs.com/ for available themes and options)

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 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).

Comments

No comments

Write comment

* These fields are required