mabuhay: Möglichkeit um Code mit Formatierung anzuzeigen

N'Abend

Meine Frage ist, wie es möglich ist ein paar Zeilen (HTML-)Code so auf einer darzustellen, damit erstens die Formatierungen (wie Zeileneinschübe) bestehen bleiben und zweitens der Code markiert, Kopiert und als Codeblock weiterverwendet werden kann.

Habs schon mit einem Textbereich versucht, aber da gibts ein paar Probleme wenn der pure Code ohne formatierte Zeichen drin steht...

Also optimal wäre natürlich wenn ich den Code aus meinem Editor mit Markieren und Kopieren gleich in meine Homepage einfügen könnte.
Zum Beispiel in Foren gibt es die [coce][/code]-Tags welche die Beibehaltung der Formatierung bewirken...

gruss

  1. Hallo,

    Meine Frage ist, wie es möglich ist ein paar Zeilen (HTML-)Code so auf einer darzustellen, damit erstens die Formatierungen (wie Zeileneinschübe) bestehen bleiben und zweitens der Code markiert, Kopiert und als Codeblock weiterverwendet werden kann.

    [ref:self811;html/text/praeformatiert.htm#definieren@title=<pre>]  
     [ref:self811;html/text/logisch.htm#elemente@title=<code>]  
        Dein Quelltext  
     </code>  
    </pre>
    

    Die spitze öffnende Klammer < musst du durch &lt; ersetzen, die schließende > durch &gt;

    Grüße
     Roland

    1. Hallo Orlando.

      Die spitze öffnende Klammer < musst du durch &lt; ersetzen, die schließende > durch &gt;

      Wobei letzteres nicht unbedingt erforderlich ist.
      Schaden kann es natürlich auch nicht.

      Einen schönen Mittwoch noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
      [HTML Design Constraints: Logical Markup]
      1. Wow, ihr habt gerade mal 6min gebraucht um zu Antworten! Respekt :)

        Vielen Dank, werds morgen gleich mal versuchen

        gn8

  2. Hallo mabuhay.

    Meine Frage ist, wie es möglich ist ein paar Zeilen (HTML-)Code so auf einer darzustellen, damit erstens die Formatierungen (wie Zeileneinschübe) bestehen bleiben und zweitens der Code markiert, Kopiert und als Codeblock weiterverwendet werden kann.

    Ja, gibt es.

    Möglichkeit 1: http://de.selfhtml.org/html/text/praeformatiert.htm@title=pre und darin http://de.selfhtml.org/html/text/logisch.htm@title=code.

    Möglichkeit 2: x-beliebiges Element und http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space@title=white-space:pre sowie ggf. http://de.selfhtml.org/css/eigenschaften/schrift.htm#font_family@title=font-family:monospace.

    Bei beiden ist es erforderlich, dass du zumindest das "<" als &lt; notierst. Sollen Zeichenreferenzen notiert werden, so musst du diese natürlich auch umschreiben. Aus &copy; würde also &amp;copy;

    Also optimal wäre natürlich wenn ich den Code aus meinem Editor mit Markieren und Kopieren gleich in meine Homepage einfügen könnte.

    Das ist so nicht möglich, da der Code ja dann interpretiert wird. Deshalb auch die Umschreibung von < und &.

    Zum Beispiel in Foren gibt es die [coce][/code]-Tags welche die Beibehaltung der Formatierung bewirken...

    Diese bewirken genau dasselbe, was ich schilderte. Nur wird dies normalerweise automatisch von einem Stringparser durchgeführt.

    Einen schönen Mittwoch noch.

    Gruß, Ashura

    --
    sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
    „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
    [HTML Design Constraints: Logical Markup]
  3. Hallo,

    ich möchte die Frage gerne erweitern. Wenn Text über ein Formular-textarea eingegeben wird, und dann mittels PHP verarbeitet und anschließend ausgegeben, dann gäbe es folgende Möglichkeiten.
    <p>
      $Text
    </p>
    Das hat allerdings den Nachteil, daß keine Zeilenumbrüche ausgegeben werden. Diese liegen als '/n' vor, wenn ich mich nicht irre? Während html ja <br> erwartet. (Wie wäre das dann mit Tabs?)

    Eine weitere Möglichkeit wäre:
    <pre>
      <code>
       $Text
      </code>
    </pre>
    Was aber den Nachteil hat, daß lange Textzeilen nicht umgebrochen werden, wodurch u. U. horizontales Scrollen erforderlich würde, richtig?

    Die Möglichkeit mit whitespace:pre; lasse ich mangels IE Unterstützung mal aussen vor.

    Wenn man aber sowohl horizontales Scrollen vermeiden, aber totzdem eine möglichst dem Eingabetext entsprechende Formatierung erreichen will, müßte man doch mittels preg_replace() jedes "/n" gegen ein "<br>" austauschen, richtig?

    Müßte das dann in einer foreach Schleife programmiert werden, oder würden mittels preg_replace alle matches "/n" gegen "<br>" ausgetauscht?

    Wie wird das hier im Forum realisiert? Eingegebene Zeileinumbrüche bleiben erhalten, der Text paßt sich aber trotzdem dem viewport variabel an.

    vielleicht ein paar viele Fragen auf einmal?

    einen schönen Tag
    da^Powl

    1. Hallo Powl.

      Das hat allerdings den Nachteil, daß keine Zeilenumbrüche ausgegeben werden. Diese liegen als '/n' vor, wenn ich mich nicht irre?

      Nein, das wäre eine ganz normale Zeichenkette. Steuerzeichen werden mit dem Backslash maskiert, also „\n“.

      Während html ja <br> erwartet. (Wie wäre das dann mit Tabs?)

      Diese entsprechen dem Steuerzeichen „\t“.

      Die Möglichkeit mit whitespace:pre; lasse ich mangels IE Unterstützung mal aussen vor.

      Diese Begründung verstehe ich nicht. Der IE hat keinerlei Probleme mit dieser Eigenschaft (außer, dass sie eigentlich „white-space“ heißt) und diesem Wert.

      Wenn man aber sowohl horizontales Scrollen vermeiden, aber totzdem eine möglichst dem Eingabetext entsprechende Formatierung erreichen will, müßte man doch mittels preg_replace() jedes "/n" gegen ein "<br>" austauschen, richtig?

      Nein, nicht unbedingt. Präformatierter Text wird unverändert dargestellt, also werden sämtliche Zeilenumbrüche auch dargestellt.
      Zudem gäbe es Möglichkeiten, um zu großes horizontales Scrollen zu vermeiden:
      1. http://de2.php.net/manual/en/function.wordwrap.phpwordwrap, hier wird der Text nach der angegebenen Zeichenzahl umgebrochen.
      2. http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow:auto, wenn der Text hier breiter ist, als der ihm zur Verfügung stehende Platz, wird einfach ein horizontaler Scrollbalken angezeigt.

      Wie wird das hier im Forum realisiert? Eingegebene Zeileinumbrüche bleiben erhalten, der Text paßt sich aber trotzdem dem viewport variabel an.

      Schau doch einfach in den Quellcode des aktuellen Postings?
      Dort siehst du, dass eine Funktionalität genutzt wurde, die PHPs nl2br entspricht.
      In der Textarea ist natürlich nichts Dergleichen erforderlich, da das Steuerzeichen für den Zeilenumbruch hier natürlich automatisch wie gewünscht umgesetzt wird.

      Einen schönen Donnerstag noch.

      Gruß, Ashura

      --
      sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
      „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
      [HTML Design Constraints: Logical Markup]
      1. Hallo Gunnar™

        wordwrap

        Gruß, Ashura

        --
        sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
        „It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
        [HTML Design Constraints: Logical Markup]
      2. Hallo Ashura,

        Nein, das wäre eine ganz normale Zeichenkette. Steuerzeichen werden mit dem Backslash maskiert, also „\n“.

        Ja, sorry ich meinte "\n".

        Während html ja <br> erwartet. (Wie wäre das dann mit Tabs?)

        Diese entsprechen dem Steuerzeichen „\t“.

        Ja, nur wie wäre die [\n -> <br>] analoge html Entsprechung?

        Die Möglichkeit mit whitespace:pre; lasse ich mangels IE Unterstützung mal aussen vor.
        Diese Begründung verstehe ich nicht. Der IE hat keinerlei Probleme mit dieser Eigenschaft (außer, dass sie eigentlich „white-space“ heißt) und diesem Wert.

        Ich zitiere mal aus SelfHTML zum thema white-space:
        Zitat
        "Erläuterung:

        Mit white-space: können Sie das Verhalten für den Zeilenumbruch festlegen. Folgende Angaben sind möglich:

        normal = automatischer Zeilenumbruch (wie bei allen HTML-Tags außer <pre> und <nowrap>).
        pre = Zeilenumbruch wie im Editor eingegeben (so wie bei <pre>...<pre>).
        nowrap = Kein automatischer Zeilenumbruch, Umbruch möglich durch entsprechende HTML-Tags.
        Beachten Sie:

        Diese Angabe gehört zur CSS-Version 2.0. Der Internet Explorer interpretiert nur den Wert nowrap und diesen erst ab Version 5.5, nicht den Wert pre. ...
        Zitatende
        Wenn ich das richtig interpretiere, dann versteht IE "white-space:pre;" also nicht.

        Wenn man aber sowohl horizontales Scrollen vermeiden, aber totzdem eine möglichst dem Eingabetext entsprechende Formatierung erreichen will, müßte man doch mittels preg_replace() jedes "/n" gegen ein "<br>" austauschen, richtig?

        Nein, nicht unbedingt. Präformatierter Text wird unverändert dargestellt, also werden sämtliche Zeilenumbrüche auch dargestellt.

        Ja, sofern sie eingegeben wurden, aber nicht in Abhängigkeit zum viewport, und darum ging es mir.

        Zudem gäbe es Möglichkeiten, um zu großes horizontales Scrollen zu vermeiden:

        1. http://de2.php.net/manual/en/function.wordwrap.phpwordwrap, hier wird der Text nach der angegebenen Zeichenzahl umgebrochen.

        (404er)
        Das wäre mir zu unflexibel, siehe oben.

        1. http://de.selfhtml.org/css/eigenschaften/positionierung.htm#overflow@title=overflow:auto, wenn der Text hier breiter ist, als der ihm zur Verfügung stehende Platz, wird einfach ein horizontaler Scrollbalken angezeigt.

        Dieses horizontale Scrollen ist ja eben das, was ich gerne vermieden hätte.

        Schau doch einfach in den Quellcode des aktuellen Postings?
        Dort siehst du, dass eine Funktionalität genutzt wurde, die PHPs nl2br entspricht.

        DAS ist das Ei des Columbus, Danke! Diese Funktion entspräche einem Austausch von \n gegen <br>, ist aber sinnvoller als mittels preg_replace().

        In der Textarea ist natürlich nichts Dergleichen erforderlich, da das Steuerzeichen für den Zeilenumbruch hier natürlich automatisch wie gewünscht umgesetzt wird.

        Das ist klar, aber es ging ja um die anschließende Ausgabe in HTML (mittels echo $text z. B.)

        Einen schönen Donnerstag noch.

        Selbst auch und danke für Deine Antwort. nl2br() ist die Lösung.

        Tschüß
        da^Powl

        1. Nachtrag,

          ich habe es nun anders gelöst. mittels

            
          str_replace("\n", "<br> \n\t", $string);  
          
          

          dadurch kann ich bestimmen, ob ich <br> oder <br /> einsetzte, was sich für n12br() je nach PHP version unterscheidet, zudem kann ich durch Steuerzeichen den Quelltext auch etwas besser in der Spur halten.

          Aber vielen Dank für die Dankanstöße!

          Tschüß
          da^Powl