Farbdarstellung von PHP Quelltext

Ja, schön wäre es könnte man den PHP-Quelltext auf seiner Seite hübsch bunt und übersichtlich darstellen. Richtig, auf die Idee zu diesem Tutorial hat mich die ziemlich einfache Darstellung desselben hier in den Webstylez-Tuts gebracht, aber ich gehe mal davon aus, dass diese Funktion nur aus Zeitmagel oder zur Ladezeitoptimierung fehlt, denn eigentlich is das nur eine kleine, aber recht feine Sache.

Nun, seit PHP 4 bringt PHP eine eigene, ziemlich intelligente Funktion zum Quelltext einfärben mit: highlight_string. Damit muss man nun keine komplexen Skripta mit preg_match_all mehr schreiben sondern hat es kompakt in einem. Diese Funktion alleine reicht übrigens jenen vollkommen, die ihren Code einfach nur farbig darstellen wollen:

<?
$text = '<?
$text ="Ich bin Text, ist das nicht geil?";
echo $text;
?>';

highlight_string($text);
?>


Dabei funktioniert highlight_string wie die echo Funktion und gibt den Quelletext sofort farbig auf dem Bildschirm aus. Wir aber wollen unseren gefärbten Quelltext nun weiterverwenden und in einer komplexeren Darstellung einbetten. Dazu müssen wir den gefärbten Quelltext in einer Variabel abspeichern. Wer das aber macht wird sehen, das in der Variabel dann nur ein Einser abgelegt ist, und highlight_string den gefärbten Quelltext wieder eigenmächtig penetrant direkt ausgibt. Der Einser ist dabei der Statuswert den die Funktion zurückliefert. 0 würde bedeuten "fehlgeschlagen" und 1 heißt eben Funktion erfolgreich ausgeführt.

Damit die Funktion unsere Variabel jetzt aber ernst nimmt, müssen wir einen zweiten, optionalen Parameter angeben, den boolschen "return" Wert. Bool ist ein Wert der nur 0 oder 1 also TRUE oder FALSE sein kann. Wer schon einmal eine Funktion gemacht hat weiß, das man das Endergebnis nur auf zwei Arten weiterverwenden kann: Entweder man gibt es mit echo & Co sofort direkt aus, oder man schmeißt es in eine Variabel und gibt diese mittels return zurück.

Ob die highlight_string den gefärbten Quelltext nun mittels echo direkt, oder in einer Variabel ausgibt, entscheidet nun dieser boolsche return. Gibst du nichts, 0 oder FALSE ein, wird der Text sofort direkt mit echo ausgegeben, schreibst du TRUE oder 1 ist return true und das bedeutet highlight_string legt den einigefärbten Text in einer Variabel ab.

Wir nehmen jetzt mal die Variabel, denn wir wollen das noch ein bisschen hübscher darstellen.
Wie wir alle wissen, sind Quelltexte oft sehr breit, sprengen also das Layout einer Webseite, wenn man ihn dort darstellen will. Deshalb tun die Meisten, so auch Webstylez, etwas Furchtbares: sie erzwingen einen Zeilenumbruch, sodass mitten in der mysql_query zum Beispiel die Zeile gewechselt wird. Das muss nicht sein. Dankt dem <div> Feld. Dessen Breite kann man nicht nur erzwingen, sondern auch, dass es sich ab einer gewissen Breite oder Höhe fixiert und zur Einsicht des weiteren Inhaltes Scrollbars erzeugt. Das geht mit dem Befehl overflow. Dieser Befehl bringt jedoch nur etwas in Zusammenhang mit einer Höhen- und/oder Breiten- Angabe, denn ansonsten wird das <div> sich so dehnen, das es brav den ganzen Inhalt anzeigen kann.

<div style="width: 100%; height: 500px; overflow: auto"></div>

Das "auto" bei Overflow bedeutet, dass das div automatisch, also selbst festlegt wann es Scrollbars zeigt. Willst du, dass immer Scrollbars gezeigt werden gib "overflow: scroll" an. Das ist aber unschön. Damit manche Browser jetzt aber nicht trotzdem einen Zeilen-Umbruch erzwingen weil die Scrollbars bei ihnen eine niedrigere Priorität haben als der Umbruch, geben wir dem <div> noch die CSS- Eigenschaft "white-space: nowrap" hinzu, was nur "kein Zeilenumburch bedeutet".
Benutzer- Freundlichkeit; Bedenke:

1.) Das <div>, sollte nie höher sein als das Blickfeld des Benutzers. Gibst du zum Beispiel keine Höhe an, werden bei einem 200 Zeilen langen Skript auch 200 Zeilen angezeigt. Das bedeutet es werden nur die Scollbars für die Breite, also zum hin und her scrollen, angezeigt. Will jetzt aber jemand zum Beispiel oben in der zweiten Zeile nach rechts scrollen, sieht er die Scrollbar dafür nicht, weil diese sich ganz unten, unter der 200. Zeile befindet. Er muss dann also ganz nach unten scrollen, dort kann er dann erst nach rechts scrollen, und dann muss er wieder hoch damit er in der zweiten Zeile den nun aufgedeckten Teil sieht. Ist das zum Beispiel irgendwo in der Mitte des Skriptes findet er die Gegend nie mehr.

2.) Gibst du eine Höhe von 200px an, hast aber zum Beispiel nur ein Skript mit 3 Zeilen anzuzeigen, hieße das, das noch zusätzlich eine freie Fläche von 7 Zeilen größe angezeigt wird. Das sieht nicht nur unprofessionell aus, sondern ist auch Platz- Verschwendung. Ich empfehle daher nicht "height" im <div> zu verwenden, sondern "max-height", also maximale Höhe. Dann werden bei drei Zeilen auch nur drei Zelen und keine Scrollbars angezeigt, weil sie nicht von nöten sind, nur wenn das Skript länger als der Wert von "max-height" ist, werden die Scrollbars angezeigt.

Nun zum letzen Kniff: Nummerierten Zeilen. Das PHP Skript dazu ist ein explode, mit dem die Zeilenumbrüche gezählt werden und eine For-Schleife die sie dann aufzählt und hinschreibt. $qt wäre der Quelltext.

$zeilen = explode("
",$qt);

for($i=1;$i<=count($zeilen);$i++)
{
$zl .= $i."<br>";
}

Jetzt wo wir eine Liste von Zeilennummern haben, müssen wir sie auch richtig zum Quelltext hinzufügen. Das tun wir wieder mit einem <div>, welches wir einfach davor angeben und dessen CSS Eigenschaft "float" wir auf "left" setzen. "float" ist der Textumfluss, "left" die Position die dabei das zu umfließende Element einnehmen soll. Wir setzen die Liste der Seitenzahlen also links an den Rand, und lassen es vom <div> mit dem Quelltext umfließen. Damit die Zeilennummern nun aber korrekt mitgescrollt werden, müssen wir das zu scrollende <div> in ein neues <div> auslagern, sodass darin dann die beiden <div> mit den Zeilennummern und den Quelltext nebeneinandergelegt gescrollt werden.

Und wer bis hier hin gelesen hat wird von mir mit einer fertigen Funktion belohnt die all das tut was ich hier beschrieben habe:

function pequetef($qt) //PHP Quelltext Färber
{
$zeilen = explode("
",$qt);

for($i=1;$i<=count($zeilen);$i++)
{
$zl .= $i."<br>";
}

$quelltext = highlight_string($qt,TRUE);

$ausgabe = '<blockquote><div style="border: 1px solid #000000;">
<div style="background-color: #DFDFDF; padding: 5px"><code><b>Quelltext: PHP</b></code></div>
<div style="background-color: #F4F4F4; white-space: nowrap; width: 100%; max-height: 468px; overflow:auto">
<div style="background-color: #E9E9E9; padding: 5px; float:left; text-align: right">
<code>'.$zl.'</code>
</div>
<div style="background-color: #F4F4F4; padding: 5px">
<code>
'.$quelltext.'
</code>
</div>
</div>
</div></blockquote>';

return $ausgabe;
}

Die Ur-Funktion davon findet ihr auf php.net/function.highlight_string in den Benutzer- Kommentaren.
Die Benutzung dieser Funtkion ist auch recht simpel:
$in_farbe = pequetef($quelltext);

Info für Eingeweihte: Im CepraSystem ist diese Funktion im Desprafokus enthalten.

Auf http://einicher.ei.funpic.de/externes/pequetef.php seht ihr übrigens wie mit dieser Funktion ein sehr komplexes Skript dargestellt wird.
Soviel von mir, vielen Dank für eure Aufmerksamkeit.

Meine persönliche Seite: http://einicher.ei.funpic.de/

Kommentare

Spike_php
Spike_php am Montag, 2. Mai 2005 um 18:10

mhh scheint gut zu sien, bloß leider ist hie ralles verrutscht

Markus René Einicher
Markus René Einicher am Dienstag, 3. Mai 2005 um 07:34

Ja, hab ein paar Tags nicht geschlossen. Jetzt is wieder alles korrekt. Hm, wollt noch ein paar Bilder dazutun jetzt find ich die nimma.

Spike_php
Spike_php am Dienstag, 31. Mai 2005 um 16:39

Mhh es schein irgendiw ein Fehler zu geben, denn ich habe es mal schnell kopiert und ausprobiert

www.web168.arena-hosting.de/highlight.php

aber es geht net.

Markus René Einicher
Markus René Einicher am Mittwoch, 8. Juni 2005 um 09:51

Natürlich nicht, was du da reingetan hast ist ja kein PHP Quelltext. die highlight_string wird von den PHP Tags <? ?> ausgelöst.

Schau: einicher.ei.funpic.de/externes/pequetef2.php

Nico Schubert
Nico Schubert am Dienstag, 17. März 2009 um 14:30

Huhu,

sehr schöner Artikel, was aber nicht schön ist an der Code Box, das bei langen Code in einer Zeile einfach der gesamte Code Unten unter der Zeilenanzeige steht, dies ist aber nur im IE 7 so.

Grüße Nico

Markus René Einicher
Markus René Einicher am Mittwoch, 18. März 2009 um 16:21

Werd das bei Gelegenheit mal fixen. So oder so nutz jedoch bitte einfach einen anständigen Brauser wie Firefox, Opera, Safari, Chrome usw. bitte weg von IE der hat genug Schaden angerichtet.

rompers
rompers am Sonntag, 4. April 2010 um 13:25

mh nur wird geht die seite mit der function nicht mehr