Enabling code syntax highlighting on a SharePoint blog

I’ve just spent an hour looking over our Sharepoint site at work and decided that I wanted to implement the same code syntax highlighting plugin as I use on here, namely the SyntaxHighlighter plugin.

To do this was actually pretty straightforward, once I figured it out. The following steps need to be performed on all three “views” that the blog has: Default, Post and Category. What you need to do is as follows:

1. Put the page in Edit Mode by clicking Site Actions –> Edit Page in the top right corner
   
2. Click   above the “Posts” Web Part
3. Select and press Add
4. On the right side of the Web Part, click Edit and select Modify Shared Web Part
   
5. Click the button
6. Insert the following code snippet:
   

   <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css"/>  
   <link type="text/css" rel="stylesheet" href="http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css"/>  
   <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js"></script>  
   <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js"></script>  
   <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js"></script>  
   <script type="text/javascript" src="http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js"></script>  
   <script type="text/javascript">  
       SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';  
       SyntaxHighlighter.all();  
   </script> 

7. To add more brushes, simply add the references you want. To see the list, browse to http://alexgorbatchev.com/pub/sh/2.1.364/scripts/
8. Next, in the tool panel on the right side of the page, expand the Layout section and select Hidden
   
9. Click OK

Now all you need to do is use the PreCode Pluginfor Windows Live Writer (or alternatively just use the <pre class=”brush: csharp”> … code … </pre> in the WYSIWYG editor (remember to click the Edit Html button)

Happy blogging :-)