Thursday, August 5, 2010

Using SyntaxHighlighter 3.0+ on your blog

You can guess from the title that this is a Techie blog and that means I will be posting some code snippets from time to time and so I was looking into some options of code syntax highlighting and I narrowed it down to the awesome SyntaxHighlighter. I use a custom domain name but host my blog on blogger. I also use the awesome Windows Live Writer for posting.

Setting SyntaxHighlighter up was fairly easy but I did find a ton of blog posts on the web about how to do that with varying information. A lot of these posts were so old that they just misdirect you and deprive you from using the all the great features that the latest version offers so I thought I might take a moment to post the best solution that I know so far. Here goes,

Things you should know
SyntaxHighligher is a completely javscript and css based solution to syntax highlighting and it works on the client side and does not require you to embed inline styles and css. Now that is great with one drawback. Since the scripts are hosted (either on your site or somewhere on the web) and are linked on your website pages they will not make it to your RSS feed so most readers will not be able to show the highlighting. Personally, I think it is alright but if you don’t agree stop right here, SyntaxHighligher is not for you.

So How to Set it up then
As I said most of the information on the web is old so those posts tell you to link all the the brush JS on your page but from version 3.0 onwards SyntaxHighlighter has a nifty little feature for auto loading just the required brushes rather than linking all of them. Now if you don’t understand what I am talking about don’t worry, it’s even better since you don’t have to “unlearn” anything :-). Just follow the steps below to set it up for your blogger blog!

Step 1: Add the css and JavaScript links in the <head> section of your blog

<link href='' rel='stylesheet' type='text/css'/> 
<link href='' rel='stylesheet' type='text/css'/>
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>

Now notice that Alex Gorbatchev is actually providing free hosting for the required JavaScripts and CSS so you don’t have to worry about getting a place to host them. Also you will always point to the latest version if you just point to the “Current” directory.

Step 2: Setup Autoloader for brushes by adding the following javascript function again in the <head> section of your blog

<script language='javascript'>

function path()
var args = arguments,
result = [];

for(var i = 0; i != (args.length-1); i++)

return result

Now blogger actually changes the single quotes to &#39; for you or you can post it encoded like above. Either ways it should be fine.

Step 3: Call to action – Use the JS to highlight all the sections on your blog, insert the script below just above </body> tag.

<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;;

SyntaxHighlighter.autoloader.apply(null, path(
&#39;applescript @shBrushAppleScript.js&#39;,
&#39;actionscript3 as3 @shBrushAS3.js&#39;,
&#39;bash shell @shBrushBash.js&#39;,
&#39;coldfusion cf @shBrushColdFusion.js&#39;,
&#39;cpp c @shBrushCpp.js&#39;,
&#39;c# c-sharp csharp @shBrushCSharp.js&#39;,
&#39;css @shBrushCss.js&#39;,
&#39;delphi pascal @shBrushDelphi.js&#39;,
&#39;diff patch pas @shBrushDiff.js&#39;,
&#39;erl erlang @shBrushErlang.js&#39;,
&#39;groovy @shBrushGroovy.js&#39;,
&#39;java @shBrushJava.js&#39;,
&#39;jfx javafx @shBrushJavaFX.js&#39;,
&#39;js jscript javascript @shBrushJScript.js&#39;,
&#39;perl pl @shBrushPerl.js&#39;,
&#39;php @shBrushPhp.js&#39;,
&#39;text plain @shBrushPlain.js&#39;,
&#39;py python @shBrushPython.js&#39;,
&#39;ruby rails ror rb @shBrushRuby.js&#39;,
&#39;sass scss @shBrushSass.js&#39;,
&#39;scala @shBrushScala.js&#39;,
&#39;sql @shBrushSql.js&#39;,
&#39;vb vbnet @shBrushVb.js&#39;,
&#39;xml xhtml xslt html @shBrushXml.js&#39;,
&#39;xml @shBrushXml.js&#39;

Notice I am using the new AutoLoader functionality and also since my blog is hosted on Blogger I am setting the bloggerMode to true. If your blog/website is different you should not set this flag and the rest of the setup should be the same for you. Also notice I have added XML brush twice one as a part of the xml xhtml.. group and one as a stand alone item. This was done to work around an issue with the WLW plug-in that I use so if you are not using it then you can remove that. Keeping it the way it is doesn’t hurt too. 

Step 4: Add the sections that you want to highlight and set the correct CSS class

<pre class="brush: css; toolbar: false;">

public static void main()


    Console.WriteLine(&quot;Highlight me!&quot;);



And if everything is setup correctly it should look like below,

public static void main()
Console.WriteLine("Highlight me!");

A complete list of brushes can be found here. And the complete list of Settings can be found here. But wait, why remember these brushes and settings, why not install the awesome PreCode Snippet plug-in for the Live Writer and let the plug-in handle that for you. Once you install the plug-in you should be able to fire up the plug-in window like below and go crazy..


Wow, this post got long! But hopefully it will save people some time. And hey, this post will be a good test to see if I set it up correctly or not.

Wednesday, August 4, 2010

Testing Some Code highlighting

public static void main()
Console.WriteLine("Syntax Highlighter Testing");

How about some XML

<script src='' type='text/javascript'/> 
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>
<script src='' type='text/javascript'/>

And some JavaScript maybe

// Adds a new row to the table.
function addRow(){
//get the table
var table = document.getElementById('myExampleTable');

//get the number of rows currently in the table
var numRows = table.rows.length;

//insert a new row at the bottom
var newRow = table.insertRow(numRows);

//create new cells
var newCell1 = newRow.insertCell(0);
var newCell2 = newRow.insertCell(1);
var newCell3 = newRow.insertCell(2);

//set the cell text
newCell1.innerHTML = 'Row ' + (numRows + 1) + ' Cell 1';
newCell2.innerHTML = 'Row ' + (numRows + 1) + ' Cell 2';
newCell3.innerHTML = 'Row ' + (numRows + 1) + ' Cell 3';

And how can you forget SQL..

Select * from Employee

And CSS.. although it might not feature on the blog that much..

a:visited {
a:hover {
a img {

“Page not found” or 502 when accessing an Azure Web Role

In the last week me and one of my collogue have been trying to nail down an issue when we try to access a simple Azure application from our Work network. I am posting it here as I think someone can benefit from this,

I literally just clicked through the Create New Project –> Next –> Next and created a “Simple” Cloud application with just a single Web Role and a Hello World page. Removed the diagnostic connection string that Azure adds by default just to make it even simpler. Basically the page just said “Hello World!” and nothing else was going on. Deployed the app on Azure and to my surprise it just didn’t work. I kept getting the default “Page not found”! Time to fire up fiddler and see what’s going on and here’s what Fiddler gives me,

[Fiddler] Connection to failed.
Exception Text: A connection attempt failed because the connected party did not properly respond after a period of time, or established connection failed because connected host has failed to respond

Basically nothing much. Same deal when you use a tracert command.

And to add to that the app was just working fine from my iPhone. So we have an app that worked from an external network but didn’t from our corporate network with very little debugging info that one can point at. Luckily there was one service that we were able to hit from our corpnet and I logged into that and found that the only difference between that service and my “hello world” app was the affinity group.

Affinity group Details for the Service that DID NOT work:

Affinity group : mycustomaffinitygroup
Geographic Location: North/Central US

Affinity group Details for the Service that DID work:

Affinity group : Unaffiniated
Geographic Location: Anywhere in US

I changed the “hello world” to Unaffiniated and “anywhere in US” and wallah It started working. Now this SHOULD NOT happen. Either the North/Central data center was just slow to respond to requests from our internet gateway or there is something wonky with the custom affinity groups but either ways it’s BADD! Or a third reason could be the timeout value for our gateway before it closes the connection is set to a low value.. but not likely as I have never seen any issues with any other internet sites as such.

I have a thread going with Steve Marx from Microsoft here. Let’s hope he can track it down if at all it’s an issue with the Azure service. I hope not!

Tuesday, August 3, 2010

Find your favorite Setting in Visual Studio 2010

Most programmers are really picky! Especially when it comes to the IDEs. Visual studio 2010 offers you 100s of customizations. For the most part it’s awesome as long as you can find the setting that you want to change. Here’s what an options dialog from Visual Studio 2010 looks like..


Notice there are 100s of items that you can customize but it’s missing one important thing! Where is the “Find” button to jump to the right setting???

Not to worry, Microsoft cares for you developers. Although it didn’t release it as a Visual studio feature they released an awesome extension called Productivity Power tools. Install that and it has a nice little feature called “Quick Access”, just press cntrl + 3 and you will see a window like below


Notice it finds menu items, Visual studio options and much more. It also let’s you navigate directly to the option from right within the interface. Really helpful.

Btw, have you tried pressing “cntrl + ,” yet?? Go ahead try it.. I think you will like it!

Hope that helps.