Displaying Code on Blogger.com

UPDATE: Syntax Highlighter has been updated. Please check the site for the updated process. This post is now historical.

I just moved my blog to Blogger.com. I wanted to be able to post code and I previously had Code Syntax Highlighter working. It is great because when viewed on a device that does not support HTML well (like some RSS feed readers) the code is just surrounded in a Pre tag and does not end up with a lot of HTML syntax around it. When displayed on the web site it looks well formatted. It didn’t take much to get it working on Blogger. You just need to add some script tags and a link to your style sheet. You will need to store these on another web server as Blogger does not allow you to upload files except pictures. I chose to put the script tag references in a “HTML/JavaScript” gadget. That way I can change my template and reduce the amount of code I need to adapt in the template to get the syntax highlighting setup. I went to the “Layout” tab then “Page Elements”. I added a new “HTML/JavaScript” Gadget and I enter the following html

<script class="javascript" src="http://YourAddress.com/js/shCore.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushCSharp.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushCpp.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushCss.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushJScript.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushRuby.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushVb.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushPython.js"></script>
<script class="javascript" src="http://YourAddress.com/js/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code',true,false,false,1,false);
</script>

I Still needed the CSS sheets for the highlighting. I couldn’t find any way to get it to work without updating the template so I added the line below just after the <Head> tag.

<link href='http://YourAddress.com/css/syntaxhighlighter.css' rel='stylesheet' type='text/css'/>

I am using windows live writer and there are some challenges with the Pre tags. If you just go to the HTML and paste any HTML text the browser still interprets it. I first paste it into the  web layout or normal view then go to the HTML code view and surround the test in the pre tags. For example, the code above looks like this in live writer HTML view:

<pre class="html" name="code">&lt;link href='http://YourAddress.com/css/syntaxhighlighter.css' rel='stylesheet' type='text/css'/&gt;</pre>

I made some changes to the default CSS sheet. I started off with the CSS that Scott Hanselman uses but I made it look more like Visual Studio by removing the darker line numbering section and the alternate line darkening. Just personal presence.

Here is a problem I found about wrapping. I didn’t like how it wrapped the text. This causes gaps in line numbers and because it does not honor the indentions it’s harder to follow the code. I noticed also that when you post one line that goes beyond the width of the box the height of the box does not resize when it adds the scroll bar over the text (IE6 and 7). There is no way to see the text. I added 15 pixels to the bottom. It is still annoying that it turns on the vertical scroll bar. The alternative it to turn on scrolling all the time and the box is sized correctly and the vertical scroll bar never highlights. The down side is that it is always there just grayed out.

The code syntax Highlighter supports C#, VB, HTML, XML, Ruby and more.  Post your comments below to tell me if you like it or if you have an other suggestions on how best to post code.



vvvvvv