Quellcode-Darstellungen mit Scrollbar durch overflow:auto;

Bei der Anzeige von Quellcode innerhalb von Webseiten stellt sich oft das Problem, dass der Quellcode, der normalerweise in einer Zeile steht, länger ist, als die Inhaltsspalte der Website breit.

Praktisch ist es dann, wenn das Element, in welchem der Quellcode dargestellt wird, automatisch einen horizontalen Scrollbalken einblendet, wenn die Zeile breiter ist, als das umschließende Element, wie hier zu sehen:

Screenshot einer Quellcode-Box

Dazu genügt es, für das Element, innerhalb dessen der Quellcode angezeigt wird, die CSS-Definition overflow:auto; zu notieren!

Das CSS für eine Quellcode-Darstellungs-Box könnte zum Beispiel so aussehen:

pre {
 margin:1em;
 padding:1em;
 border:1px solid #ededed;
 display:block;
 background-attachment: scroll; /* erzeugt Scrollbar */
 overflow:auto;
}

Zum Anzeigen von Quelltext innerhalb eines HTML-Dokumentes eignet sich übrigens das <pre>-Tag ganz besonders, da es jeden Inhalt zwischen Anfangs- und End-Tag in dicktengleicher Schrift darstellt und Einrückungen so wiedergegeben werden, wie sie beim Editieren eingegeben wurden.

Trotzdem müssen aber Sonderzeichen, wie Tags oder Klammern im HTML-Quelltext als HTML-Entities notiert werden.

Im HTML-Code würde dann also beispielsweise stehen:

<pre>&lt;p&gt;Das ist ein Beispiel-Absatz&lt;/p&gt</pre>

Ganz einfach geht das mit dem Worpress-Plugin Simple Code.

Kommentare & Trackbacks

Kommentar von Dirk:

Hi,

die Methode hat einen kleinen Hacken. Der Firefox beschränkt sich auf das nötigste und stellt auch wirklich nur einen horizontalen Scrollbalken dar. Anders sieht es im IE aus, der zusätzlich einen vertikalen Scrollbalken ergänzt.

22. Mai 2006 um 12:05
Kommentar von Franziska:

Hallo Dirk,

danke für die Anmerkung.

Die Darstellung im IE ist wirklich nicht ganz so optimal.
Aber doch ein wenig besser, als dass der Text unter Umständen über alle Layoutgrenzen hinausragt.

Kennst Du eine Möglichkeit, das im IE anders zu lösen?

22. Mai 2006 um 12:12
Kommentar von Max:

In firefox gibt es da leider Probleme, aber IE ist ja bald sowieso Geschichte.Also ich hoffe das. Ich hoffe aber auch, dass Firefox dann nicht auch ine zweites IE wird..

2. März 2010 um 19:37