I generally include source code of one kind or another in my postings. Being used to the <code>, </code> tags commonly available in user forums such as www.unix.com, I was surprised to find that no such facility was available for use on Blogger. I searched around the Internet and came across similar complaints from other users and various suggestions and means of formating code so that it is attractively and usefully displayed in a post. After trying a number of methods and formats developed by others and generally being unhappy with the results, I decided that my best approach was to develop and incorporate a custom CSS element for displaying source code into my Blogger layout template.
Here is the CSS element which I am using to display the source code in this post:
/* Custom styling ----------------------------- */
.displaybox, .displaybox pre
{
font-family: Andale Mono, Lucida Console, Monaco, fixed, monospace;
font-size: 12px;
color: black;
background-color: RGB(245,218,199);
border: 1px dashed #999999;
line-height: 14px;
padding: 5px;
overflow: auto;
width: 100%
}
I added this code to my blog template in the <b:skin> section of the template just about the Comments section.
Here is a sample of the output for a simple C function. No changes had to be made to the source code except to change the include header angle brackets to < and > respectively.
#include <shell.h>
int
b_hello(int argc, char *argv[], void *extra
{
if (argc != 2) {
printf("Usage: hello arg\n");
return(2);
}
printf("Hello %s\n", argv[1]);
return(0);
}
This custom CSS element in my blog template will not eliminate the need to make any changes to source code before including the code in a post but it does simplify things. With this CSS element in place, the only parts of the source code that I should have to manually edit in order to display correctly are angle brackets, ampersands and quotation marks.
UPDATE 07/01/2009 This post was written when I was using Blogspot. I am now using WordPress on my own web site.

























