The RTE CKEditor used since TYPO3 8 can be configured very well to your own needs. Under ckeditor.com there are also further add-ons available, with which the RTE can be extended easily. 

I took the example code snippet. With this I can - e.g. in this article - provide the code easily. 

In my SitePackage Configuration/Yaml/Rte/Plugins/codesnippet.yaml

 

editor:
  config:
    codeSnippet_theme: 'obsidian'
    codeSnippet_languages:
      bash: 'Bash'
      html: 'HTML'
      json: 'Json'
      diff: 'Diff'
      dockerfile: 'Dockerfile'
      javascript: 'JavaScript'
      php: 'PHP'
      css: 'CSS'
      scss: 'Scss'
      typoscript: 'TypoScript'
      yaml: 'Yaml'

 

which is then included in the configuration file of the RTE. This file is also located in the SitePackage and there under Configuration/Yaml/Rte/Default.yaml:

 

imports:
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Processing.yaml" }
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Base.yaml" }
  - { resource: "EXT:rte_ckeditor/Configuration/RTE/Editor/Plugins.yaml" }
  - { resource: "EXT:sitepackage/Configuration/Yaml/Rte/Plugins/codesnippet.yaml" }

editor:
  config:
    contentsCss: ["EXT:rte_ckeditor/Resources/Public/Css/contents.css", "EXT:sitepackage/Resources/Public/Frontend/StyleSheet/rte.css"]
    stylesSet:
      - { name: 'Button Stil 1', element: 'a', attributes: { 'class': 'btn' } }
      - { name: 'Button Stil 2', element: 'a', attributes: { 'class': 'btn outline' } }
      - { name: 'Button Stil 3', element: 'a', attributes: { 'class': 'btn icon' } }
      - { name: 'Button Stil 4', element: 'a', attributes: { 'class': 'btn icon outline' } }
      - { name: 'Button Stil 5', element: 'a', attributes: { 'class': 'btn color-2' } }
      - { name: 'Button Stil 6', element: 'a', attributes: { 'class': 'btn color-2 outline' } }
      - { name: 'Button Stil 7', element: 'a', attributes: { 'class': 'btn color-2 icon' } }
      - { name: 'Button Stil 8', element: 'a', attributes: { 'class': 'btn color-2 icon outline' } }
      - { name: 'Schrift Stil 1', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-1' } }
      - { name: 'Schrift Stil 2', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-2' } }
      - { name: 'Schrift Stil 3', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-3' } }
      - { name: 'Schrift Stil 4', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-4' } }
      - { name: 'Schrift Stil 5', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-5' } }
      - { name: 'Schrift Stil 6', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-6' } }
      - { name: 'Schrift Stil 7', element: ['h1','h2','h3','h4','h5','h6','p'], attributes: { 'class': 'text-7' } }


    format_tags: 'p;h1;h2;h3;h4;h5;h6'

    toolbarGroups:
      - { name: clipboard, groups: [clipboard, undo] }
      - { name: insert, groups: [ insert ] }
      - { name: tools, groups: [ tools ] }
      - { name: document, groups: [ mode ] }
      - '/'
      - { name: basicstyles, groups: [ basicstyles, cleanup] }
      - { name: paragraph, groups: [ list, align ] }
      - { name: links }
      - '/'
      - { name: styles}
      - { name: codesnippet}

    justifyClasses:
      - text-left
      - text-center
      - text-right
      - text-justify

    extraPlugins:
      - justify
      - wordcount
      - autolink
      - codesnippet

    removeButtons:
      - Anchor
      - Underline
      - Strike
      - Image
      - Table
      - HorizontalRule

 

whereby the desired configuration naturally depends on the project and personal taste.

This means that in the RTE backend the work is already done; in the RTE there is now a code highlight button that knows the different formats. In the frontend it still looks a bit dull; but only briefly! 

PrismJS is a flexible syntax highlighter and can be integrated very easily. At prismjs.com there is a powerful and configurable library available, which can be included e.g. by node or other bundlers (or even "on foot") and also brings along different templates, one of which will probably suit your taste.

Numerous languages are supported, besides the common formats also small treasures like Brainfuck. 

Comments (0)

No comments found!

Write new comment