Scrollbare Quellcode-Boxen

veröffentlicht am 23. Januar 2011

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.

Kommentare

Wunderbar, danke für die kleine aber feine Anleitung :). Werde das bei mir auf jeden Fall ausprobieren, sieht echt schick aus!

Kommentar #1 von Niljuha am 23. Januar 2011


Echt cool, dass du uns das Geheimnis deiner Quellcodeboxen verrätst :-P

Eine doofe Frage nur, wie richte ich es ein, dass sie scrollen? Bzw. womit ist die maximale Länge angeben?

Kommentar #2 von mcdonor am 03. Februar 2011


@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…

Kommentar #3 von Patrick am 04. Februar 2011



Hinterlasse einen Kommentar