Posting Source Code in Blogger

Finally! I figured that out! you know what I mean, right? Yes... of course you do.

Well, that previous post almost drove me nuts! I clicked on the publish button, quickly previwed the post, and then went to bed.

The next day (i.e. yesterday), I was pleasantly checking my post only to see that all the parts that contain code are a mess!

The culprit? It turned out to be the "less than" or "<" symbol. Obviously, the Google WYSIWYG editor, although very smart and easy to use, does not automatically convert the "less than" (and other) symbols into their html equivalent when they are used withing a blockquote for example. Why do we need to convert in the first place? Because html tags start with a "less than" symbol. So the html code was treating the "<" symbol as the opening of an html tag. The first solution to this is to manually enter the html code for "<" in the html editor of the post. The html equivalent for "<" is <.

The second solution is to wait and hope for the Blogger team to incorporate some features for programmers in the WYSIWYG editor. (thanks Blogger team, by the way).

Finally, after figuring that out, I also wanted to add some syntax highlighting into my code. I found this nice syntax highlighter on google code.

To make this work on blogger, do the following

1. Download SyntaxHighlighter here
2. Unzip and upload the following files to your webspace (googlepages is a great place)
1. SyntaxHighlighter.css
2. shCore.js'
3. shBrushCpp.js (or whatever code you wish to use on your blog)
   
3. Go to your Dashboard/Layout/Edit HTML
4. Add the following code right after the tag
   <!-- end outer-wrapper -- >
   
   <link href='YOUR_GOOGLE_PAGES/SyntaxHighlighter.css' rel='stylesheet'
type='text/css'/>
<script language='javascript' src='YOUR_GOOGLE_PAGES/shCore.js'/>
<script language='javascript' src='YOUR_GOOGLE_PAGES/shBrushCpp.js'/>
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Now to add source code to a post, it should be placed in <pre> tag. Obviously, you have to do this within the "Edit Html" tab of the Google editor. The typical format that I use is

<pre name="code" class="Cpp">
...insert code here...
</pre>

voila!

Cite as:
Saad, T. "Posting Source Code in Blogger". Weblog entry from Please Make A Note. http://pleasemakeanote.blogspot.com/2008/06/posting-source-code-in-blogger.html