How to use CSS to style code snippets

It is easy to use CSS to style code snippets, as shown in Figure 1.

[caption id="attachment_2836" align="alignnone" caption="Figure 1: Sample output of CSS style for code snippets"][/caption]

Step 1: Append this code inside a style sheet.

pre{ font-size:12px; background:#fff; border:1px solid #000; line-height:20px; width:600px; overflow:auto; overflow-y:hidden; margin:0; padding:0; } pre code{ font-family:Monaco,Courier; display:block; margin:0 0 0 40px; padding:18px 0; } 

Step 2: Put the code snippets inside <pre> and <code> tags.

<pre><code>def f(): txt = "Some sample code" return txt </code></pre>

How to set the font size using CSS

First reset 1em to 10px for the whole page.

body {
	font-size: 62.5%; /* Resets 1em to 10px */
}

Finally, set the font size for a section, such as the content.

#content {
	font-size: 1.6em;
	line-height: 1.6em;
}

1.6em is equal to 16px.

The line-height is the distance between lines.

How to embed source code in a blog

To embed source code inside blogger blog, like in the picture above, I use a css box like below:

.code {
font-family: ‘Courier New’, Courier, monospace;
white-space: pre;
line-height: 1.4em;
margin: 1em 0;
border: 1px dashed #aaa8a8;
padding: 0.5em 0 0.3em 0.5em;
font-size: 100%;
color: #000;
overflow: auto;
max-width: 100%;
/*max-height: 400px;*/
}

To use it just call the class named ’code’ using div.

<div class="code"> The source code goes here! </div>

The tab will be preserved. In order to limit the height of the box, remove the comment (”/*” and “*/”) from the last line, and set the desired height.

/* max-height: 400px; */

For some reason, in IE, the text will be wrapped instead of displaying the scroll bar. However, it works just fine inside Firefox and Opera. If you have suggestion on how to solve this problem, don’t hesitate to leave a comment.