Aug 03
Adding SyntaxHighlighter to SharePoint Online

The main tool I use for my blog posts is Open Live Writer, the successor to Windows Live Writer, it works great.

However…. Windows Live Writer did have one advantage, the Code Plugin, which allowed you to add segments of code with syntax highlighting and was great. It offered a range of options and which depending on the code, I would use a selection of.

Since Windows Live Write was retired, Open Live Writer code plugins have never really satisfied me.

The Solution: Adding SyntaxHighlighter by Alex Gorbatchev!

Step 1: First we will need to allow “scriptable web parts” to be added to a SharePoint Online site.

By default, SharePoint Online will prevents the adding of Scriptable Web Parts.

More details can be found at the Office Support site on – Allow or prevent custom scripts - https://support.office.com/en-us/article/Allow-or-prevent-custom-script-1F2C515F-5D7E-448A-9FD7-835DA935584F

image

CAUTION: This can be a possible security risk as unknown code from unknown locations can interact with your SharePoint! Trusted locations are important and security, risk and all other factors should be considered when enabling this feature.

NOTE: Once this process has been completed, re-disable this setting by swapping the 0 for a 1

We can change this by using the SharePoint Online Management Console.

PowerShell snippet can be found here.

Connect-SPOService -url https://archongnosis-admin.sharepoint.com
Set-SPOsite https://archongnosis.sharepoint.com/sites/Intranet -DenyAddAndCustomizePages 0

Note: You will be prompted for your username and password.

image

Success! We can now add Scriptable Web Parts! more precisely, the Script Editor Web Part

Step 2: Adding JavaScript & CSS links to the page

Now that we have enabled the ability to add scriptable web parts, lets go ahead and edit the page we wish to use SyntaxHighlighter on and add a Script Editor Web Part to the page.

First, Add a Script Editor Web Part to the page.

image

Once added, Place the web part in Edit Mode.

image

Click on “Edit Snippet”

Add the following script to the web part (Code snippet can be found here)

<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shAutoloader.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushCSharp.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPowerShell.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js"></script>

<script type="text/javascript">
    function sh(){
        SyntaxHighlighter.highlight();
    };

    ExecuteOrDelayUntilScriptLoaded(sh, "core.js");
</script>

image

CAUTION: ONLY USE TRUSTED LIBRARIES FROM TRUSTED THIRD PARTIES OR HOST THEM YOURSELF!

NOTE: In this code fragment, I am including the Brush for C# (shBrushcsharp.js), Ive included more on brushes below, but a quick note here is… for each language you want to display, you will need to load the correct brush file (see http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/ for details)

Once the script has been pasted in, Click Insert.

image

Congratulations, SyntaxHighlighter should now be functioning!

Step 2 – Adding a Code Segment via HTML

Now that we have SyntaxHighlighter installed, we surly have something to highlight?

While the page is still in Edit Mode, Click on Embed Code

image

Add in some sample code (Code snippet can be found here):

<p>some code below:</p>
<pre class="brush: csharp toolbar: false">void test() { string s = "";}
</pre>

Click Insert to insert the code fragment into the page

image

Then save the page.

image

Ta-Da!

CAUTION: DONT FORGET TO DISABLE THE ABILITY TO ADD SCRIPTING PARTS BY REPLACING THE 0 WITH 1 IN POWERSHELL! – DO IT NOW!

image

(Yes, this blog does now include SyntaxHighlighter!)

A note about Brushes

SyntaxHighlighter will render a ranger of different code languages, but it needs to have the "Brush” for it included in the first script tag.

For each different language you wish to use SyntaxHighlighter for, you will need to include the brush for it in your script web part.

For a list of brushes and their filenames, please see the following link:

http://alexgorbatchev.com/SyntaxHighlighter/manual/brushes/

Comments

There are no comments for this post.