Kategorien
Browser Frontend: HTML5, CSS3, jQuery Webstandards

Firefox: Code-Beispiele in Listen machen Probleme

In letzter Zeit ist es recht beliebt geworden, Code-Beispiele in HTML-Listen zu packen, beispielsweise so:

<ul>
<li><code>&lt;style type="text/css"&gt;</code></li>
<li><code>@media screen,projection {</code></li>
<li><code>/**/</code></li>
<li><code>}</code></li>
<li><code>&lt;/style&gt;</code></li>
</ul>

(Live-Beispiel unsortierte Liste)

Schön und gut, mag semantisch auch irgendwie sinnvoll sein, gerade wenn man im Artikel Bezug auf die Zeilennummer (bei ol-Listen) nimmt. Leider macht da Firefox ein Problem, wenn man den Code kopiert und anschließend im Editor einfügt:

   * &lt;style type="text/css"&gt;
* @media screen,projection {
* /**/
* }
* &lt;/style&gt;

Sternchen am Anfang, bei ol-Listen die Listen-Nummerierung:

Sortierte Listen ol

<ol>
<li><code>&lt;style type="text/css"&gt;</code></li>
<li><code>@media screen,projection {</code></li>
<li><code>/**/</code></li>
<li><code>}</code></li>
<li><code>&lt;/style&gt;</code></li>
</ol>

(Live-Beispiel sortierte Liste)

Wird zu:

   1. &lt;style type="text/css"&gt;
2. @media screen,projection {
3. /**/
4. }
5. &lt;/style&gt;

Fazit

Copy & Paste ist somit nicht mehr ohne weiteres möglich, da immer eine Nachbearbeitung des Codes erfolgen muss. Daran erinnert, dass dem so ist, hat mich der Artikel Quellcode mit HTML formatieren. Vielen Dank dafür ;)

5 Antworten auf „Firefox: Code-Beispiele in Listen machen Probleme“

Ein sehr guter Hinweis, danke!

Interessant auch: Firefox 1.5 kopiert den Text zwar “korrekt” ohne die HTML-Entities, aber trotzdem mit den Aufzählungszeichen bzw. Zahlen.

Dummerweise hilft auch das Plugin “Copy Plain Text” nicht, das auch die Aufzählung mit kopiert.

btw: Braucht man die code-Tags innerhalb der Liste wirklich? Man könnte ja alternativ die Liste mit einem entsprechenden Font formatieren, wenn man das code-Tag nicht aus semantischen Gründen verwenden möchte. (Was vielleicht nicht so viel Sinn macht, weil man ja ein code-Tag-Paar pro Zeile verwenden müsste.)

Semantisch gesehen ist es Code, von daher ist ‘ne Auszeichnung als Code wohl angebracht. Aber jeder so wie er will oder? ;) Dein Vorschlag ist aber eigentlich nicht schlecht.

Oder wie wärs mit Tabellen? Für jede neue Zeile dann ein neues <tr>. Strg gedrückt halten und nur die Zellen mit dem Code kopieren. Leider werden die Zeilen nicht als Zeilenumbruch kopiert, also auch keine Lösung.

Aber hey, dass Firefox die Zeilennummern bzw. ein Aufzählungszeichen mitkopiert, find ich gar nicht schlecht, schließlich bleibt der Sinn beim kopierten Text erhalten und man hat nicht einfach nur Text. Nur bei dieser Code-Zeilennummerierung hat man eben ein paar Probleme ;)

Ich sehe das genauso, wie du in deinem letzten Absatz geschrieben hast, Michel. Das ist schon sinnvoll, dass das so gemacht wird.

Code als Liste zu verpacken ist auch nicht sinnvoll, finde ich. Code ist ein zusammenhängendes Konstrukt, eine Liste zählt aber einzelne Items auf. Die Zeilenumbrüche und die Nummerierung sind zwar teilweise praktisch, aber halt nicht vorgesehen. Wenn man sich im Text dann auf eine besondere Stelle beziehen möchte, kann man diese ja optisch hervorheben.

Kommentare sind geschlossen.