Scrollbare Quellcode-Boxen
Ich zeige ja relativ häufig mal Quellcodes in meinen Artikeln. Nun hat mich @Niljuha vorhin gefragt, wie ich die Quellcode-Darstellung umgesetzt habe. Diese sehen dank CSS3 nicht nur schick aus (abgerundete Ecken), sondern sind auch scrollbar, falls eine Zeile mal zu lang wird.
Meine Code-Boxen werden folgendermaßen formatiert:
pre {
background: #333;
border: 1px solid #333;
color: #fff;
font: 12px "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
overflow: auto;
padding: 10px;
-moz-border-radius: 3px;
border-radius: 3px;
}
pre * {
font: 12px "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
}
Wenn man WordPress benutzt, kann man solche Quellcodes bequem über den Schrifttyp monospace (steht in der Auswahlbox zusammen mit den Überschriften etc) nutzen.
Empfehlen
Veröffentlicht am 23.01.2011 |
Kategorien: WordPress
Tags: Code, Quote, scrollbar, Stylesheet, Webdesign, WordPress, Zitat
4 Kommentare
Wunderbar, danke für die kleine aber feine Anleitung
. Werde das bei mir auf jeden Fall ausprobieren, sieht echt schick aus!
Echt cool, dass du uns das Geheimnis deiner Quellcodeboxen verrätst
Eine doofe Frage nur, wie richte ich es ein, dass sie scrollen? Bzw. womit ist die maximale Länge angeben?
@mcdonor: Bei dem horizontalen Scrollen hast du zwei Möglichkeiten: entweder keine Breitenangabe und das Element dehnt sich zunächst auf die maximale Breite aus. Erst wenn eine Codezeile länger ist, als der vorhandene Platz, wird eine Scrollbar angezeigt. Zweite Möglichkeit ist das Festlegen der Breite.
Wenn du möchtest, dass Codefelder nur eine maximale Höhe haben dürfen, musst du das explizit festlegen. Ansonsten wird das Element einfach länger…
[...] the red corner' (this text containes all characters of the alphabet)" exit 0 LinksTechspread.de: Scrollbare Quellcode Boxen hier gibt es noch andere Tricks (Hintergrund, runde Ecken)Scrollbar für langen Text mit pre [...]