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.

Veröffentlicht am 23.01.2011

3 Kommentare

• 

  Niljuha schrieb am 23. Januar 2011

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

  mcdonor schrieb am 3. Februar 2011

  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?
• 

  Patrick schrieb am 4. 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…