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>