CSS für Beispiele mit Terminalausgabe

Auf der Suche nach einer adäquaten Anzeige von Terminalausgaben bin ich im Blog "Code & rando" von Olivier Mengué fündig geworden. [1]

Die Angaben zum CSS müssen nur in Blogger-Template eingefügt werden. Hier mein angepasstes CSS (Design -> Vorlagen-Designer -> Erweitert : CSS hinzufügen):

/*
 * terminal highlighting
 * thanks to Olivier Mengué
 */
pre { font-size: 1em }
pre.terminal { margin-left: 1pt; padding: 5pt; }

/* Text not embedded in samp or kbd will be in red, to easily detect errors */
pre.terminal { background: #3f3f3f; color: #f00; }
pre.terminal samp.prompt { color: #999; }
pre.terminal samp { color: #eee; }
pre.terminal kbd { color: #fff; font-weight: bold; }
pre.terminal var { color: #0f7fff; font-style: italic; }

Ein Beispiel:

<pre class="terminal unix">
<samp class="prompt shell">foo@bar:~$ </samp><kbd class="shell">whoami</kbd>
<samp>foo</samp>
<samp class="prompt shell">foo@bar:~$ </samp><kbd class="shell">date</kbd>
<samp><var>Mi 13. Apr 16:42:56 CEST 2011</var></samp>
</pre>

Ergebnis:

foo@bar:~$ whoami
foo
foo@bar:~$ date
Mi 13. Apr 16:42:56 CEST 2011

Quellen:
[1] http://o.mengue.free.fr/blog/2007/08/25/39-syntax-highlighting-on-this-blog-using-semantic-tags-and-vim