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:
- Put the page in Edit Mode by clicking Site Actions –> Edit Page in the top right corner
- Click
above the “Posts” Web Part - Select
and press Add - On the right side of the Web Part, click Edit and select Modify Shared Web Part
- Click the
button - 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>
- 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/
- Next, in the tool panel on the right side of the page, expand the Layout section and select Hidden
- 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 :-)