0 comments

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 :-)

comments powered by Disqus