HTML- und PHP-Code auf Website darstellen

    Hallo,

    ich bastel gerade an einem Layout, welches das Aussehen eines Texteditors mit Zeilennummerireung haben soll. Beispielcode soll also etwa so auf der Website dargestellt werden:

    1 <?php
    2
    3 include "php-code.php";
    4
    5 ?>

    Natürlich sollte das Ganze der Semantik der HTML-Elemente entsprechen. Und ich bin da im Moment noch nicht ganz sicher, wie ich das am besten machen könnte.

    Folgenden HTML-Code nehme ich im jetzigen Entwicklungsstadium:

    <pre class="phpCode">
    &lt;?php
    ...
    ...</pre>

    Die CSS-Formatierung dazu ist:

    .phpCode { margin:8px; white-space:pre-wrap; background-color:#ddffdd; }

    Jetzt kommt der Knackpunkt, weshalb ich hier überhaupt poste. Die Zeilennummerierung soll eine dunklere Hintergrundfarbe bekommen als der PHP-Code. Die Ziffern brauchen daher also eine eigene CSS-Formatierung. Man könnte also folgendes machen:

    .phpCode span { background-color:#33ff33; }

    Und in die HTML-Datei notieren:

    <pre class="phpCode">
    <span>01</span>&lt;?php
    <span>02</span>
    <span>03</span>include "php-code.php";
    <span>04</span>
    <span>05</span>?&gt;

    Das würde, das Layout betreffend, dann das gewünschte Ergebnis bringen. Wenn man sich nun aber mal vorstellt, hier 20 bis 30 Zeilen Code zu haben und viele der Zeilen bestehen aus 80 oder mehr Zeichen, dann wird das Ganze im HTML-Dokument recht unübersichtlich. Könnte man da statt <span> was anderes nehmen? [b] wäre doch schön kurz :D nur das nimmt man ja für bold (fetten Text). Und anstatt <pre> könnte man auch <code> nehmen. Allerdings hat <pre> gegenüber <code> den Vorteil, dass ältere Browser, die das CSS-Format white-space:pre-wrap; noch nicht können, die Zeilenumbrüche auch richtig darstellen. Also, wie würdet ihr das formatieren?

    Und noch ne Frage nebenbei: Kann man mit CSS auch sowas wie Syntaxhighliting hinbekommen?

    Wie wär's denn damit? Die führenden Nullen können leider IE und ältere Operaversionen nicht.

    Code
    .code { background-color: #ddffdd;}


ol {list-style-type: decimal-leading-zero;}


li {background-color: #33ff33;}
    Code
    <div class="code">
[list=1]
[*]Zeile 1
[*]Zeile 2
[*]Zeile 3
[/list]
</div>

    Was Highliting betrifft könntest du per CSS einfach ne Klasse mit ner Hintergrundfarbe definieren und die per span aufrufen.