a4apphack

This post details about the steps to add Syntax Highlighting Feature to any SharePoint site where you have access to upload files to server. This can help people who embed code snippets in the SharePoint site and share it with their team.

Download and extract SyntaxHighlighter scripts to your PC (Check the download link at the bottom of the post). Now access the SharePoint site and create a folder structure as shown in the below screenshot (i.e. to create ‘scripts’, ‘src’ and ‘styles’ folders inside syntax folder which is present in ‘Shared Documents’). Now upload the syntax highlighter files to appropriate folders.

Upload Scripts Folder Structure

Step 2

Access the page where you want syntax highlighter to be enabled and go the ‘Edit Mode’.  Add ‘Content Editor Web Part’ to the page. This Web Part will contain the scripts that provides reference to the syntax highlighter code uploaded in SharePoint server.

Add Content Editor Webpart

Step 3

View the Web Part options by clicking on the ‘Modify Shared Web Part’ menu. Click on the ‘Source Editor’ and enter the scripts to call syntax highlighter.

Select Source Editor

<LINK href="/sites/Shared Documents/syntax/styles/shCore.css" type=text/css rel=stylesheet>
<LINK href="/sites/Shared Documents/syntax/styles/shThemeDefault.css" type=text/css rel=stylesheet>
<SCRIPT src="/sites/Shared Documents/syntax/scripts/shCore.js" type=text/javascript></SCRIPT>
<SCRIPT src="/sites/Shared Documents/syntax/scripts/shBrushJScript.js" type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
    SyntaxHighlighter.config.clipboardSwf = '/sites/Shared Documents/syntax/scripts/clipboard.swf';
    SyntaxHighlighter.all();
</SCRIPT>

Note: Change the paths in the script if you have uploaded the syntaxhighlighter code in a different location

Step 4

Hide this Web Part by checking the ‘Hidden’ option.

Hide Layout

Step 5

Add 2nd Content Editor Web Part. This Web Part will contain the code which you want to highlight. Use the Source Editor and paste the code there.

Step 6

Wrap your code with the syntax highlighter wrapper codes, change the language value as per your code. Click Ok to view the syntax highlighted code

<pre class="brush: js">

Syntax Highlighter Info
App Name	Syntax Highlighter
License	free
Type	code
App URL
More Info	link