Auf der Suche nach einem Inhaltselement welches Source Code darstellt, bin ich auf die Extensions 
sk_codebox, jph_codesnippets und sema_sourcecode aufmerksam geworden.
Ich habe alle drei installiert, mir aber nur sk_codebox jph_und codesnippets näher betrachtet.
Nachfolgendes stellt keine Bewertung der Extensions im allgemeinen dar, sondern lediglich meine persönliche.
Alle drei Erweiterungen setzen auf die geshi Bibliothek auf, welche für das Syntax Highlighting zuständig ist.
Vom Erscheinungsbild hat mir sk_codebox zugesagt, da hier bereits eine Box ausgeliefert wird die sich in der Größe einstellen lässt und bei Bedarf Scrollbalken einblendet. Die Stylesheetangaben zu dieser Box sitzen allerdings direkt am Element, wodurch ein überschreiben per CSS Datei nicht möglich ist. Möglich ist aber einige der Angaben, die ich hier nicht weiter nennen werde, per TypoScript zu überschreiben. Der Sourcecode wird per Texteingabe am Plugin vorgenommen.
Am Plugin lassen sich Zeilennummern zuschalten und die Angabe der Höhe und Breite der Box beeinflussen.
Vom Funktionsumfang hat mir jph_und codesnippets zugesagt. Am Plugin kann der Sourcecode per Texteingabe oder per Datei erfolgen.
Bei übergabe per Datei ist es möglich diese auch als Download zur Verfügung zu stellen. Weiterhin gibt es Optionen wie Zeilennnumern zuschalten, Jede n-te Zeile anderes darzustellen, oder auch die Hervorhebung bestimmter Zeilen, dazu wird eine CSS Klasse an das jeweilge Element gesetzt.
Überhaupt ist der Einfluss per CSS Datei möglich, da die Erweiterung eine entsprechende CSS Klasse am Element darstellt.
Aufgrund dieser Vielfältigkeit habe ich mich für den Einsatz dieses Plugins entschieden.
Da ich auf die scrollbare Box mit vorgegebener Dimension nicht verzichten wollte und auch noch die Anforderung hatte, dass die Zeilennummern vom Benutzer abgeschaltet werden können, musste ich etwas Hand anlegen, was nachfolgend detailliert beschrieben wird.
Problemstellung
Sourcecode Darstellung als Inhaltselement unter Verwendung der Typo3 Erweiterung jph_codesnippets in einer Box welche mit einer festen Größenangabe versehen ist.
Zeilennummern müssen vom Benutzer steuerbar sein (an/abschalten).
Lösung
Die Sourcecode Box wird der von sk_codebox verwendeten Box per FCE und CSS nachgebildet.
Durch einen Eingriff in die Extension und der Verwendung von Conditions in Zusammanhang mit POST Variablen, wird das zu und abschalten der Zeilennummern realisiert.
Nachfolgend die HTML Vorlage für das FCE welches nachher die Box wiedergibt.
Dabei zu sehen, die Box wie sie hier beschrieben wird im Einsatz.
Der Inhalt wird durch die Dateianzeige Variante der jph_codesnippets Erweiterung dargestellt, was eine Verlinkung, bzw. den Download dieser Datei ermöglicht.
Interessant sind die beiden Div Container die wie folgt gemapped sind.
codeBoxHeader -> Content Element inner
codeBoxContent -> Content Element inner
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="GENERATOR" content="Quanta Plus" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div class="codeBoxHeader"></div>
<div class="codeBoxContent"></div>
</body>
</html>
Nachfolgend die Vorlage, TO und DS des FCE als t3d Download. Diese muss in den Storage Ordner des Projektes importiert werden.
 | FCE codeBox | 2.8 K |
Der Vollständigkeit halber folgt die zugehörige CSS Datei.
Angepasst werden muss noch das Design gemäß der eigenen Umgebung.
{
color: #666;
background: transparent url(/Pfad/zur/Header/Grafik) repeat scroll 0% 49%;
border-top: 1px solid #000;
border-left: 1px solid #000;
border-right: 1px solid #000;
margin: 12px 0 0 0;
padding:1px 0 1px 15px;
width: 645px;
}
.codeTitle
{
float: left;
width: 55%;
}
div.codeControls
{
width: auto;
}
div.codeControls input
{
background: transparent url(/Pfad/zur/Button/Grafik) repeat scroll 0% 50%;
border: 1px solid #000000;
width: 5em;
}
.codeBoxContent
{
overflow: auto;
border: 1px solid #666;
/* background-color: #EFEFEF; */
background: transparent url(/Pfad/zur/Content/Grafik) repeat scroll 0% 0%;
margin: 0 0 12px 0;
padding: 8px 0 8px 8px;
height: 240px;
white-space: nowrap;
width: 652px;
clear: both;
position: relative; /* IE6 Darstellung mit Zeilennummern bezüglich overflow */
}
.tx-jphcodesnippets-pi
{
border: none;
padding:5px;
width: 100%;
}
.tx-jphcodesnippets-pi li
{
padding:5px;
}
.formOn
{
display:inline;
margin:0px;
float:left;
clear:right; /* IE6 */
}
.formOff
{
display:inline;
margin:0px;
}
.controlText
{
float: left;
padding: 0 10px;
color: #EEE;
}
Um die Zeilennummern per TypoScript steuern zu können, muß in die Extension eingegriffen und die nachfolgende Änderung durchgeführt werden
//$line_numbers = $this->pi_getFFvalue($pi_flexform, 'line_numbers', 'display_settings');
Im Setup des Root Templates wird der korrespondierende TypoScript Code eingefügt.
Dabei wird zunächst der Standard Zustand definiert, in diesem Fall sind die Zeilennummern
abgeschaltet. Per Condition wird die Post Variable geprüft.
Um die Button in den Header der Box per TS einbinden zu können, ist es nötigt das Header Element, welches als Content Element im TV mapping definiert wurde, um einen TypoScript Object Path zu erweitern.
Dies geschieht über die "Lokale Verarbeitung" (localprocessing).
Web -> Liste -> General Storage -> TO codeBox -> Bearbeiten -> Lokale Verarbeitung (XML)
<T3DataStructure>
<ROOT type="array">
<el type="array">
<field_codeboxheader type="array">
<tx_templavoila type="array">
<TypoScript>
<![CDATA[
10 < lib.codeboxheader
]]>
</TypoScript>
</tx_templavoila>
</field_codeboxheader >
</el>
</ROOT>
</T3DataStructure>
Bleibt als letzer Schritt die Formulare inkl. der Button per TS in den Box Header zu rendern.
Dies stellt lib.codeboxheader.20 dar. lib.codeboxheader.10 erzeugt den Inhalt aus dem Content Element. Dadurch ist es möglich sowohl Inhalte aus Content Elementen als auch per TypoScript erzeugte an einem Element darzustellen.
lib.codeboxheader {
10 = RECORDS
10 {
source.current = 1
tables = tt_content
select.orderBy = sorting
select.where = hidden = 0 and deleted = 0 and colPos = 0
wrap = <div class="codeTitle">|</div>
}
20 = COA
20 {
10 = TEXT
10.value = <div class="codeControls">
15 = TEXT
15.value = <div class="controlText">Zeilennummerierung</div>
20 = TEXT
20.typolink.parameter.data=TSFE:id
20.typolink.returnLast = url
20.wrap = <form action="|" target="_top" method="post" name="on" class="formOn">
30 = TEXT
30.value = <INPUT type="submit" name="An" value="An"><input type="hidden" name="codeMode" value="on"></form>
40 = TEXT
40.typolink.parameter.data=TSFE:id
40.typolink.returnLast = url
40.wrap = <form action="|" target="_top" method="post" name="off" class="formOff">
50 = TEXT
50.value = <INPUT type="submit" name="Aus" value="Aus"><input type="hidden" name="codeMode" value="off"></form></div>
}
}
Die Angaben sind ohne Gewähr auf Funktionalität. Kein Support !
Feedback, Anregungen, Fehler, Kritik und Verbesserungsvorschläge können per Kommentarfunktion oder 
Kontakformular eingereicht werden.
