In deinem Sitepackage die eigene RTE Konfiguration anpassen. Für die Frontendansicht ist prism.js eine schöne Lösung.

Gerne verlinke ich hier den TYPO3-Tipp von Wolfgang Wagner auf Youtube. Vielen Dank, Wolfgang, für die vielen guten Turorials.

Code Snippets mit dem CKEditor ausgeben, Teil 1/2

Hier der Link zum Youtube Kanal von Wolfang Wagner (Videos Übersicht)

Weiterführende Links:
https://ckeditor.com/ckeditor-4/resources/
https://ckeditor.com/cke4/addons/plugins/all
https://prismjs.com/

Nach dem einfügen des Codes im CE Text auf "Source" klicken. Dann siehst du, wie der eingefügte Code aussieht. Das umschliessende Tag "pre" ergänzen mit class="line-numbers" und voilà.

<?php $this->view->assign('title', 'An example title');

##############
#### PAGE ####
##############
page = PAGE
page {
    typeNum = 0
    shortcutIcon = {$page.favicon.file}

    bodyTagCObject = COA
    bodyTagCObject {
        10 = TEXT
        10.data = TSFE:id
        10.noTrimWrap = | id="p|"|
        20 =< lib.page.class
        20.stdWrap.noTrimWrap = | class="|"|
        wrap = <body|>
    }

<?php $this->view->assign('title', 'An example title');

Scroll to a anchor, coming from another page. Ein Beispielscript (gefunden auf:
https://theme.co/forum/t/scroll-to-anchor-with-offset-when-coming-from-another-page/26622/2 )

jQuery ( document ).ready ( function($) {

var hash= window.location.hash

if ( hash == '' || hash == '#' || hash == undefined ) return false;

      
      var target = $(hash);
    
      headerHeight = 120;
      
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      
      if (target.length) {
        $('html,body').stop().animate({
          scrollTop: target.offset().top - 125 //offsets for fixed header
        }, 'linear');
        
      }

} );