BeautyOfCode : Code Highlighting in (tx)news Einträgen via RTE

Mit BeautyOfCode steht eine Extension bereit, die ein eigenes Inhaltselement für Codehighlightning bereit stellt. Mit ein Wenig anpassung lässt sich das auch im RTE nutzen. 

Nach der üblichen Installation der Extension, muss man noch ein paar Anpassungen machen.

Da die Extension bedingt, dass zumindest eins Ihrer Inhaltselemente auf der aktuellen Seite eingebunden wird und ich die reine Bearbeitung per RTE vorziehe, binde ich Beauty Of Code lieber direkt ins Template ein...

1. Partial

Da der RTE in Typo3 sich nur schwer vom Verhalten abbringen läst, Linebreaks durch <BR>zu ersetzen braucht es als ersters eine anpassung in Partials/InlineJavascript/SyxntaxHighlighter.html . Entsprechend der Doku bei alexgorbatchev.com/SyntaxHighlighter/manual/configuration/ .
Hier passt gut der Bloggermode.

 

SyntaxHighlighter.config.strings.expandSource = '<f:translate id="config.strings.expandSource" default="show source" />';
        SyntaxHighlighter.config.strings.help = '<f:translate id="config.strings.help" default="?" />';
        SyntaxHighlighter.config.strings.alert = '<f:translate id="config.strings.alert" default="SyntaxHighlighter\n\n" />';
        SyntaxHighlighter.config.strings.noBrush = '<f:translate id="config.strings.noBrush" default="Can\'t find brush for: " />';
        SyntaxHighlighter.config.strings.brushNotHtmlScript = '<f:translate id="config.strings.brushNotHtmlScript" default="Brush wasn\'t configured for html-script option: " />';
        SyntaxHighlighter.config.bloggerMode = true;

 

 

2. Auswahl des Syntaxhighlighter Templates (siehe Screenshot).

3. Erweiterung des RTE im TSConfig der Seite, um das <pre> Tag mit den enprechenden Brush-Klassen setzen zu können

 

RTE.default.proc.allowTags:=addToList(pre)
RTE.default.proc.allawTagsOutside:=addToList(pre)
RTE.default.proc.entryHTMLparser_db.allowTags<RTE.default.proc.allowTags


RTE.default{
    userElements {
        10=BeautyOffCode Typo Script
        10 {
            1=typoscript
            1.description=Der ausgewählte Text wird umschlossen von<pre class="typoscript"></pre>
            1.mode=wrap
            1.content= <pre class="brush: typoscript">|</pre>
            2=bash
            2.description=Der ausgewählte Text wird umschlossen von<pre class="bash"></pre>
            2.mode=wrap
            2.content= <pre class="brush: bash">|</pre>
            3=php
            3.description=Der ausgewählte Text wird umschlossen von<pre class="php"></pre>
            3.mode=wrap
            3.content= <pre class="brush: php">|</pre>
            4=js
            4.description=Der ausgewählte Text wird umschlossen von<pre class="js"></pre>
            4.mode=wrap
            4.content= <pre class="brush: JScript">|</pre>
        }
    }
}