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
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.
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.
Once added, Place the web part in Edit Mode.
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>
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.
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
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
Then save the page.
Ta-Da!
CAUTION: DONT FORGET TO DISABLE THE ABILITY TO ADD SCRIPTING PARTS BY REPLACING THE 0 WITH 1 IN POWERSHELL! – DO IT NOW!
(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/