post code snippets in google blogger

Howdy folks, here's some code:

def myfunc(*args, **kwargs):
    for arg in args:
        print arg
    for k,v in kwargs.items():
        print k,v 

First thing you need to do is make sure you're useing the Google Blogger's "Updated Editor".

1. Log into Blogger, and from the Dashboard goto Settings.
2. On the Settings tab, down towards the bottom under "Global Settings"
3. "Select post editor" - "Updated editor"

The updated editor actually solved a lot of the "problems" I was having with pre formatted text getting messed up when I went back and forth between compose and edit html.

But to post some really good looking source code you have to use SyntaxHighlighter.

SyntaxHighlighter is written in JavaScript, and there some css styling as well. To use SyntaxHighlighter on your google blogger page, you have to edit the template.

Under the Layout tab, go to "Edit HTML"
In the "Edit Template" box, scroll down toward the bottom.
You want to add the .js/.css references just before the last closing head tag (</head>):

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='Stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='Stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js ' type='text/javascript'/>

SyntaxHighlighter makes it easy to copy the above snippet - just hover over the code, and click the "copy-to-clipboard" icon:

Then at the very bottom, you also want to set some global parameters just before the last closing body tag (</body>):

<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

 You can then make highlighted code by wrapping your code snippet's in a
<pre> tag with a specially formatted "class" attribute, like this:

<pre class="brush:js">
alert("Hello world");
</pre>

Result:

alert("Hello world");

You can add brushes for different languages by adding more JavaScript files to your Template. The author hosts the most recent version here:
http://alexgorbatchev.com/pub/sh/current/

N.B. Just because you put html inside a  <pre> tag doesn't magically make html parsers know you're try to post literal HTML code - you still have to escape valid HTML using &lt; and the like or it won't be rendered correctly.  Try something like this.

I cobbled together the following steps from these sources:
SyntaxHighlighter Homepage
Using SyntaxHighlighter on BLOGGER
Publish Source code in Blogger
Syntax Highlighter NOT working in my googleblog