Scrollbare Quellcode-Boxen

Patrick — Sun, 23 Jan 2011 21:13:14 +0000

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.

Javascripts und Stylesheets komprimieren

Patrick — Wed, 10 Nov 2010 13:59:46 +0000

Inzwischen ist es Gang und Gebe, seine Webseite auf Performance hin zu optimieren. Untersuchungen haben ergeben, dass schnellere Ladezeiten bei Google zu einer höheren Indizierung verhelfen können. Ein erster Schritt in diese Richtung kann die Komprimierung von Javascript und Stylesheets sein.

Mit dem Code Compressor von Sergej Müller kann man dies innerhalb kürzester Zeit erledigen. Einfach Code in die obere Box kopieren, die Komprimierungsart (basic oder powerful) wählen und den komprimierten Code dann in die Zieldatei kopieren. Bei meinem standardmäßig eingesetzten Reset Stylesheet von Eric Meyer konnte ich immerhin schon 32% Dateigröße sparen:

Ich persönlich muss leider gestehen, dass ich in der Hinsicht kein Vorbild bin, ich komprimiere nur die Teile, die nie angepasst werden. Ich bin deshalb immernoch auf der Suche nach einem Eclipse-Plugin was mir Quellcodes gleichermaßen komprimieren als auch wieder “entpacken” kann. Falls jemand so ein Plugin kennt – Kommentar schreiben

techspread » Stylesheet

Scrollbare Quellcode-Boxen

Javascripts und Stylesheets komprimieren