Support Bereich Hier finden Sie Antworten auf alle Fragen zu Ihrem Xobor Forum.
Wählen Sie zunächst einen Hilfe-Bereich.

Hallo,

@Wolfgang und ich setzen in unseren Foren farbliche Hervorhebungen von Quelltexten ein. Jetzt hat er dabei einen Fall entdeckt, bei dem das Highlighting einfach nicht mehr im Beitrag angewendet wird und mich auch direkt darauf hingewiesen.

Bei der Fehlersuche ergab sich jedenfalls, dass die HTML-Struktur der im Beitrag angezeigten Code-Boxen sich tlw. unterscheiden kann. Dies passiert zumindest immer dann, wenn ein(e) Bild/Datei direkt in den Beitrag eingebunden wird.

Bilder im Anhang verursachen dabei keine Probleme, es passiert erst, wenn im Beitrag die Zeichenkette [[File: vorkommt. Dann fällt bei der HTML-Struktur der Code-Boxen das letzte <code>-Tag einfach weg. Der angezeigte Code steht dann bereits direkt innerhalb des sonst darüberliegenden <pre>-Tags.

div.bbcode_code
    div.codeblock
        div.codelines
            [Zeilen-Nummern …]
        div.code
            pre
                code <= fällt bei [[File: weg
                    [QUELLCODE …]

Ich habe zur Demonstration nun einen neuen Thread bei mir eröffnet.
http://123484.homepagemodules.de/t513f11...-Codeboxen.html

Das Syntax-Highlighting ist ein guter Indikator. In den ersten zwei Beiträgen sieht man, dass der Inhalt der Code-Boxen normalerweise farblich hervorgehoben wird. Das funktioniert also auch noch, solange eine Datei ganz normal angehängt wurde.

Falls jetzt jedoch eine Datei direkt im Beitrag eingebunden wird (#3), werden die Quellcodes nicht mehr farblich hervorgehoben. Das passiert generell immer dann, wenn im Beitrag irgendwo die Zeichenkette [[File: vorkommt (#4).

In Beitrag #5 habe ich die dabei erzeugten HTML-Strukturen der Code-Boxen nochmal zum Vergleich hineinkopiert. Bei den ersten beiden Beiträgen wird wie in Zeile 22 zu sehen noch ein code-Tag um den Inhalt gesetzt. Bei den beiden nachfolgenden Beiträgen entfällt das code-Tag jedoch und stattdessen steht der Inhalt selbst nun in Zeile 22 innerhalb des pre-Tags.


Das Syntax-Highlighting und die zugehörigen Klassen (prettyprint[ed]) sind dabei zu vernachlässigen. Das war wirklich nur der Indikator, wodurch Wolfgang da überhaupt erst ein Problem aufgefallen ist.

Das Wegfallen des code-Tag passiert auch in anderen Foren. Zur Demonstration binde ich in diesen Beitrag ebenfalls mal eine kleine Datei ein. Mit der Element-Untersuchung sieht man hier genauso, dass das Code-Snippet dann unmittelbar im pre-Tag steht.

<style>
	#demo {
		color: blue;
	}
</style>
 
<script>
	function demo() {
		console.log('test');
	}
</script>
 
<a href="http://www.example.com">Example.com</a>
 

<div class="bbcode_code">
	<div class="codeblock">
		<div class="codelines">
			1<br>
			2<br>
			3<br>
			4<br>
			5<br>
			6<br>
			7<br>
			8<br>
			9<br>
			10<br>
			11<br>
			12<br>
			13<br>
			&nbsp;
		</div>
 
		<div class="code">
			<pre>
				<code>
					<style><br>    #demo {<br>     color: blue;<br>    }<br></style><br>&nbsp;<br><script><br> function demo() {<br>       console.log('test');<br>    }<br></script><br>&nbsp;<br><a href="http://www.example.com">Example.com</a><br>&nbsp;
				</code>
			</pre>
		</div>
	</div>
</div>
 

<div class="bbcode_code">
	<div class="codeblock">
		<div class="codelines">
			1<br>
			2<br>
			3<br>
			4<br>
			5<br>
			6<br>
			7<br>
			8<br>
			9<br>
			10<br>
			11<br>
			12<br>
			13<br>
			&nbsp;
		</div>
 
		<div class="code">
			<pre>
				<style><br>    #demo {<br>     color: blue;<br>    }<br></style><br>&nbsp;<br><script><br> function demo() {<br>       console.log('test');<br>    }<br></script><br>&nbsp;<br><a href="http://www.example.com">Example.com</a><br>&nbsp;
			</pre>
		</div>
	</div>
</div>