How to introduce code highlighting into sharepoint wiki articles

Check new series of the articles. Review and user experience on test management systems. Functionality and usability.

-------------------

Thats pretty much simple actually. To support highlighting I use SyntaxHighlighter and SharepointDesigner. The goal is to attach the styles and and the jscript to the heading page and finally to execute the highligher code once the page is uploaded. All of the described relates to sharepoint 2007 (free to downlod from Microsoft site). That is also applicable to the version '10 - the only difference is the master page's file name to process.

So here is the set of simple steps to apply the syntaxhighlighter to the master page of your sharepoint site so that all other pages will take that changes as well

0. Download SyntaxHighlighter files to your workstation so that you can to upload them ato your site in future.
1. Start Sharepoint designer and connect to your site. You should now work with Folder List pane.
2. Create folder to keep your SytaxHighlighter files (ex.: __codeHighlighter)
3. Create subfolders for javaScript files and CSS files (actually I keep CSS right under __codeHighlighter but js files under the separate folder __codeHighlighter/js)
4. Upload shCore.css and shThemeDefault.css to __codeHighlighter folder
5. shCore.js and the set of brush files (shBrush*.js) to __codeHighlighter.js
6. Find the master page file. For SP'07 try to find it under _catalogs/masterpage. You should see default.master file there.
7. Copy and paste that file to the same folder. It will get the name like default_copy(1).master.
8. Open that file. Now we should introduce some changes into the source code of the master page (middle area of the web page editor)
9. Paste the following code right before </HEAD> tag somewhere at the very top of the page (you should only specify the brush files you do use).

<script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shCore.js"></script>
 <script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shBrushJava.js"></script>
 <script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shBrushCpp.js"></script>
 <script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shBrushCss.js"></script>
 <script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shBrushDiff.js"></script>
 <script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shBrushGroovy.js"></script>
 <script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shBrushJScript.js"></script>
 <script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shBrushPlain.js"></script>
 <script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shBrushRuby.js"></script>
 <script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shBrushSql.js"></script>
 <script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shBrushXml.js"></script>
 <script type="text/javascript" src="pathToYourSite/__codeHighlighter/js/shBrushBatch.js"></script>
 <link href="pathToYourSite/__codeHighlighter/shCore.css" rel="stylesheet" type="text/css"></link>
 <link href="pathToYourSite/__codeHighlighter/shThemeDefault.css" rel="stylesheet" type="text/css"></link>

10. Paste the following code right before </HTML> tag (at the very bottom of the page)

<script language="javascript">   
        SyntaxHighlighter.all();   
 </script> 

11. Save the changes.
12. Right click on that you new master page file and choose Set as Default Master Page.

You are now ready to highlight the code. Create any wiki page. In the reach editor switch to the source view. Add the code according to SyntaxHighlighter examples.

You're done