Florians Forum » Themen » Sonstiges » Demo HTML-Struktur für Codeboxen
#1 Demo HTML-Struktur für Codeboxen von florian-zier
26.03.2015 18:38
Codebox mit normaler Struktur:
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<style>
#demo {
color: blue;
}
</style>
<script>
function demo() {
console.log('test');
}
</script>
<a href="http://www.example.com">Example.com</a>
#2 RE: Demo HTML-Struktur für Codeboxen von florian-zier
26.03.2015 18:42
Codebox mit normaler Struktur:
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<style>
#demo {
color: blue;
}
</style>
<script>
function demo() {
console.log('test');
}
</script>
<a href="http://www.example.com">Example.com</a>
Anhang nicht im Beitrag eingebunden.
#3 RE: Demo HTML-Struktur für Codeboxen von florian-zier
26.03.2015 18:44
Anhang in Beitrag einbinden:
Codebox mit veränderter HTML- Struktur:
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<style>
#demo {
color: blue;
}
</style>
<script>
function demo() {
console.log('test');
}
</script>
<a href="http://www.example.com">Example.com</a>
#4 RE: Demo HTML-Struktur für Codeboxen von florian-zier
26.03.2015 19:39
HTML-Strutkur der Codebox ändert sich, sobald ein Dateianhang existiert und folgende Zeichenkette im Beitrag vorkommt:
[[File:
Codebox mit veränderter HTML- Struktur:
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<style>
#demo {
color: blue;
}
</style>
<script>
function demo() {
console.log('test');
}
</script>
<a href="http://www.example.com">Example.com</a>
#5 RE: Demo HTML-Struktur für Codeboxen von florian-zier
26.03.2015 19:47
Normale HTML-Struktur mit code-Tag:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<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>
</div>
<div class="code">
<pre>
<code class="prettyprint prettyprinted" style="">
<span class="tag"><style></span><br><span class="pln"> </span><span class="com">#demo {</span><br><span class="pln"> color</span><span class="pun">:</span><span class="pln"> blue</span><span class="pun">;</span><br><span class="pln"> </span><span class="pun">}</span><br><span class="tag"></style></span><br><span class="pln"> </span><br><span class="tag"><script></span><br><span class="pln"> </span><span class="kwd">function</span><span class="pln"> demo</span><span class="pun">()</span><span class="pln"> </span><span class="pun">{</span><br><span class="pln"> console</span><span class="pun">.</span><span class="pln">log</span><span class="pun">(</span><span class="str">'test'</span><span class="pun">);</span><br><span class="pln"> </span><span class="pun">}</span><br><span class="tag"></script></span><br><span class="pln"> </span><br><span class="tag"><a</span><span class="pln"> </span><span class="atn">href</span><span class="pun">=</span><span class="atv">"http://www.example.com"</span><span class="tag">></span><span class="pln">Example.com</span><span class="tag"></a></span><br><span class="pln"> </span>
</code>
</pre>
</div>
</div>
</div>
Resultierende HTML-Struktur nach Einbetten von Dateien, ohne code-Tag:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<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>
</div>
<div class="code">
<pre>
<style><br> #demo {<br> color: blue;<br> }<br></style><br> <br><script><br> function demo() {<br> console.log('test');<br> }<br></script><br> <br><a href="http://www.example.com">Example.com</a><br>
</pre>
</div>
</div>
</div>