Ergebnis 1 bis 3 von 3

Thema: HTML- und PHP-Code auf Website darstellen

  1. #1
    Azubi(ne)
    Registriert seit
    20.06.2008
    Beiträge
    64
    Danke
    2
    Bekam 0 mal "Danke" in 0 Postings

    Standard 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-spacere-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 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-spacere-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?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Bandit
    Gast

    Standard

    Hast du dir das mal angesehen: http://de3.php.net/manual/de/functio...ght-string.php

    Interessant sind auch die "User Contributed Notes" auf dieser Seite.

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Wie wär's denn damit? Die führenden Nullen können leider IE und ältere Operaversionen nicht.
    Code:
    .code &#123; background-color&#58; #ddffdd;&#125;
    
    ol &#123;list-style-type&#58; decimal-leading-zero;&#125;
    
    li &#123;background-color&#58; #33ff33;&#125;
    Code:
    <div class="code">
    
    1. Zeile 1
    2. Zeile 2
    3. Zeile 3
    </div>
    Was Highliting betrifft könntest du per CSS einfach ne Klasse mit ner Hintergrundfarbe definieren und die per span aufrufen.

Ähnliche Themen

  1. Code Fenster html code
    Von Hurrican im Forum HTML & CSS Forum
    Antworten: 13
    Letzter Beitrag: 07.01.2009, 16:04
  2. Html code als text darstellen lassen
    Von badmicha im Forum HTML & CSS Forum
    Antworten: 11
    Letzter Beitrag: 08.01.2008, 20:19
  3. Inhalt von Unterordnern in index.html als Link darstellen
    Von Plone_N00b im Forum Zope & Plone - das deutsche Hilfeforum
    Antworten: 0
    Letzter Beitrag: 10.12.2007, 10:21
  4. Html-Datei innerhalb einer TabellenZelle darstellen
    Von yukuza im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 12.06.2005, 21:37
  5. HTML Code auf einer HTML-Hilfe Website anzeigen
    Von Sternenkrieger im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 16.06.2004, 10:24

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •