Gettin' My Geek On » Add new tag http://www.markstevens20.net/blog Ramblings on my experiments with Linux, networking, and collaboration aps Sat, 30 Jan 2010 01:23:57 +0000 en hourly 1 http://wordpress.org/?v=3.0 CSS Formats for Code Presentation http://www.markstevens20.net/blog/2009/07/css-formats-for-code-presentation/ http://www.markstevens20.net/blog/2009/07/css-formats-for-code-presentation/#comments Sat, 25 Jul 2009 03:42:52 +0000 Mark Stevens http://www.markstevens20.net/blog/?p=187 I need to have some sections of code in my blog, as any good geek blog would. Here is what I added to my blog’s style sheet to support my code entries. In fact, the presentation of the css code uses the code definitions in the style sheet. Can you say recursion?

/* section to define the ‘code box’ and text used to show computer output */
.code {
font-family:’Courier New’, Courier, Monospace, Fixed;
line-height: .6em;
font-size: 110%;
white-space: pre;
border: 2px ridge #0f5384;
padding: .5em;
background-color: #fffeef;
color: #511211;
min-width: 10em;
overflow: auto;
}

/* section to define text used to show computer input */
.code b {
font-weight: 900;
color: #0f5384;
}

/* section to define text used to show my comments within the code box */
.code i {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-effect: italic;
white-space: normal;
line-height: 1em;
}

Then I apply the code format using <div class=”code”> and then, within that div section, use <b> to indicate text that is input to the system, and <i&gt to indicate text that is a comment I wrote in the code box. It’s nothing fantastic, but it’ll do the job.

]]> http://www.markstevens20.net/blog/2009/07/css-formats-for-code-presentation/feed/ 1