Open theme customization --> Advanced tab --> Add CSS
Paste this CSS if you like it, or customize your own:
/* Curonian pretty-printing styles. Used with prettify.js. */
pre .str, code .str { color: #DB312F; } /* string literal */
pre .kwd, code .kwd { color: #268AD1; } /* keyword */
pre .com, code .com { color: #B3AE9D; font-style: italic; } /* comment */
pre .typ, code .typ { color: #859900; } /* type */
pre .lit, code .lit { color: #D33682; } /* literal value. e.g. 1, null, true */
pre .pun, code .pun { color: #647B83; } /* punctuation string */
pre .pln, code .pln { color: #647B83; } /* plain text */
pre .tag, code .tag { color: #FF0000; } /* sgml tag */
pre .dec, code .dec { color: #FF0000; } /* markup declaration such as a DOCTYPE */
pre .atn, code .atn { color: #FF0000; font-weight: normal;} /* sgml attribute name */
pre .atv, code .atv { color: #FF0000; } /* sgml attribute value */
pre .src, code .src { color: #FF0000;} /* embedded source */
pre.prettyprint, code.prettyprint {
font-family:"Lucida Console", Monaco, monospace;
font-weight: normal;
font-size: 8pt;
background-color: #FDF6E2;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
-o-border-radius: 2px;
-ms-border-radius: 2px;
-khtml-border-radius: 2px;
border-radius: 2px;
}
pre.prettyprint {
width: 95%;
margin: 5px 0px;
padding: 2px; border: 1px solid #EDE8D4;;
white-space: pre-wrap;
}
/* Specify class=linenums on a pre to get line numbering */
ol.linenums { margin-top: 0; margin-bottom: 0; color: #647B83; } /* IE indents via margin-left */
li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8 { list-style-type: none }
/* Alternate shading for lines */
li.L1,li.L3,li.L5,li.L7,li.L9 { }
@media print {
pre.prettyprint { background-color: none }
pre .str, code .str { color: #060 }
pre .kwd, code .kwd { color: #006; font-weight: bold }
pre .com, code .com { color: #600; font-style: italic }
pre .typ, code .typ { color: #404; font-weight: bold }
pre .lit, code .lit { color: #044 }
pre .pun, code .pun { color: #440 }
pre .pln, code .pln { color: #000 }
pre .tag, code .tag { color: #006; font-weight: bold }
pre .atn, code .atn { color: #404 }
pre .atv, code .atv { color: #060 }
}
Now go back to blogger and switch to edit HTML. At the end of
head
tag add these lines
<!-- Pretty print support start -->
<link href="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.css" rel="stylesheet" type="text/css"/>
<script src="http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js" type="text/javascript" />
<script language="javascript" type="text/javascript">
$(window.blogger.ui()).on('viewitem', function (event, post, element) {
prettyPrint();
});
</script>
<!-- Pretty print support end -->
Save & close your template.
Now when you want to include source code in your post - put it inside
pre
tags. Like this:
<pre class="prettyprint">
/*
* Put your code here
*/
</pre>
You can find more information on usage over at prettify project website here:
http://code.google.com/p/google-code-prettify/
Also thank you to
Jeffery To over at
stackoverflow for JS function which makes it all work nicely inside blogger.