HOWTO beautify code syntax with automatic formatting within blogger

Admittedly, I've been lazy about just dropping code into blogger (unformatted), but now I'm glad to say that I've finally gotten around to adding a bit of css and javascript magic into the blogger template.

The syntax highlighter code is created and maintained by Alex Gorbatchev and to get it up and running quickly, I more or less used Carter Cole's instructional write up.  After modifying the theme choice and putting the css and js on a host, we are cooking with a Foreman!  Note, I'm using the standard distribution which includes a smaller set of brushes, whereas there are many more out there, and others in development.

So here is exactly what I did:

1. Download the current distribution of the sytnax highlighter above, or decide if you are okay with letting someone else host that css & javascript for you


• if chose to downloaded it, upload/ftp/host it at your own provider (e.g. I use 01solutions.com)


2. Log in to your blogger account (try using google's beta), look for the blog in question, click Layout
3. The URL should read http://draft.blogger.com/rearrange?blogID=magicnumber
4. Click Edit HTML
5. Backup your current template to a local file, by clicking Download Full Template
6. Edit the template: I inserted the below javascript & css declarations after the HTML tag, and Before the Head tag

<link href='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 

<link href='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/styles/shThemeDjango.css' rel='Stylesheet' type='text/css'/>
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shCore.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushCpp.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushCSharp.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushCss.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushJava.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushJScript.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushPhp.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushPython.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushRuby.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushSql.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushVb.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushXml.js' type='text/javascript'/> 
<script src='http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/shBrushPerl.js' type='text/javascript'/> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://www.01solutions.com/images/syntaxhighlighter_2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();

So now to post something with code, while preparing the post:

1. Click Edit HTML
2. If you are posting HTML source itself, your results may vary (depending if you are using a beta version of blogger, etc) - but I'd recommend to escape all < and > with &lt; and &gt; which can be automatically done for you via many webpages such as the one Carter Cole points out by Accessify: http://accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php
3. Decide which brush / language you are using, and preface & postface the code you are dropping in with the appropriate pre tag (use the alias list in the first image above), e.g.:

great HTML code goes here..

<table width=100% cellpadding=0 cellspacing=0 border=0>
<tr>
<td width=143 rowspan=3>
<h1>
<a href="?">
<img src="/mail/help/images/logo1.gif"
width=143 height=59 border=0
alt="Gmail by Google">
</a>
</h1>
</td>
<td width=1 rowspan=3> </td>
<td height=25 colspan=2 align=right valign=top>










 

or

        // insert your c# code here
        public Workflow1()
        {
            InitializeComponent();
        }

        public Guid workflowId = default(System.Guid);
        public SPWorkflowActivationProperties workflowProperties = new SPWorkflowActivationProperties();

Easy, eh? Not sure if I'm going to go back and update old code within posts yet, but if anyone comments on whether that'd be helpful, I could be convinced.