Blogger: CSS styles for code view

Did you like the code formatting in my last post? Adding a small CSS code to your Blogger template makes your code samples stand out and makes them much easier to read.

.codeview { 
font-family:"courier"; 
color: blue; 
font-size: 70%; 

margin : 15px 35px 15px 15px;
padding : 10px; 
background : #f9f9f9; 

border-top : 1px solid #eeeeee; 
border-right : 2px solid #cccccc; 
border-bottom : 2px solid #cccccc; 
border-left : 1px solid #eeeeee; 
}

There are 3 groups of style within this CSS snippet - font changes, box characteristics and border. The background makes the code stand out no matter what the format of your blogger so you can change your template at will. The colour and font face make it feel a bit more like "real" code and the border just adds a little flair. 

To install this style open the Edit HTML tab in the Design settings of your blog:

Cut and paste the code just above the close of the Skin tag in your Blogger template:

]]></b:skin>

When you wish to insert a highlighted code section you use the following template in the Edit HTML tab of your post editing:

<div class = "codeview"> 

%%YOUR CODE SAMPLE%% 

</div>

Remember when you are preparing your post content that you need to convert your code to HTML representations of the ASCII characters (for example < should be converted to &lt; ) otherwise the browser will attempt to execute rather than display the code. 


This can be easily completed with a set of simple text replacements, if you're not confident with the scripting you can use conversion scripts such as these handy examples from Palfrader.