Horizontal und vertikal Scrollen für das Anzeigen von Quelltext
08. Dezember 2008
Die weiteren Arbeiten an meinem Blog betreffen die Template-Dateien des in der DE-Edition verwendeten Kubrick-Theme. Um die Änderungen an diesen Dateien hier aufzuzeigen, benötige ich die Möglichkeit, den Quelltext in einer ansprechenden Form darzustellen. Die Zeilen des Quelltextes sind oft sehr lang, und ein Zeilenumbruch, der nicht im Quelltext jedoch in der Darstellung vorhanden ist, führt zu Unübersichtlichkeit. Das möchte ich vermeiden und brauche deshalb die Funktionalität des Scrollens.
Ein horizontales und vertikales Scrollen bietet die Möglichkeit, die Quelltexte entsprechend darzustellen. Ich habe das in HTML wie folgt umgesetzt:
<div style="height:120px; width:100%; overflow:scroll; border:1px solid">
<pre>
<code>
Quelltext
</code>
</pre>
</div>
Beim Darstellen von Quelltexten sind die HTML-eigenen Zeichen entsprechend zu ersetzen:
| HTML -Zeichen | Beschreibung | HTML -Code | HTML -Unicode |
|---|---|---|---|
| < | öffnende spitze Klammer | < | < |
| > | schließende spitze Klammer | > | > |
| “ | Anführungszeichen oben | " | " |
| & | Ampersand, kaufmännisches Und | & | & |
Das Ersetzen mache ich z. Z. noch mit dem Editor - also per Hand. Wichtig dabei ist, immer mit dem &-Zeichen zu beginnen. Sonst geht es schief. Es wird sich sicherlich noch eine Lösung finden, das Ersetzen zu automatisieren.
Der Wert von “height” wird entsprechend der Länge des darzustellenden Quelltextes gesetzt. Das ist vielleicht nicht die komfortabelste Methode. Aber sie funktionert.
Einen Kommentar schreiben
Die Angaben mit * sind erforderlich.