Donnerstag, 14. April 2011
Link-Tipp: Awesome code syntax highlighting made easy
In meinem vorigen Post habe ich zur besseren Darstellung der Code-Schnipsel diese mit SyntaxHighlighter 3.0 hervorgehoben. Wie SyntaxHighlighter in blogger.com integriert werden kann, ist hier sehr anschaulich erklärt:
Mittwoch, 13. April 2011
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
Abonnieren
Kommentare (Atom)