Enabling code syntax highlighting on a SharePoint blog

by Graffen 17. November 2009 14:35

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
    image
  2. Click image  above the “Posts” Web Part
  3. Select image and press Add
  4. On the right side of the Web Part, click Edit and select Modify Shared Web Part
    image
  5. Click the image 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
    image
  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)


image

Happy blogging :-)

Tags: , , ,

blog comments powered by Disqus

Powered by BlogEngine.NET 1.6.1.0
Theme by Mads Kristensen | Modified by Mooglegiant

About the author

A blog about me, R/C planes, .NET, C#, Twitter and whatever else I feel like writing about.