How to use SyntaxHighlighter in Google Blogspot blogger engine: manual installation

For writing my previous posts I used Windows Live Write app. It has good enough syntax highlight plugin – it was not perfect but was good enough for my purposes – you may check example e.g. in the following post: One way to avoid “Term update failed because of save conflict” error when create managed metadata terms in Sharepoint. As you probably know MS discontinued Windows Live Writer some time ago and now there is it’s open source version called Open Live Write (which I use now also for writing this post). Unfortunately previous syntax highlight plugin doesn’t work and I needed to search alternative.

One of the first plugins which Google showed me was Windows/Open Live Writer Code Plugin. But as you may see on this page it says

The Live Writer Source Code Plug-in For WordPress.com Blogs.

When I tried to use it with my Blogspot blog it didn’t work.

There is popular source code highlighter library SyntaxHighlighter from Alex Gorbatchev. Unfortunately currently there is no available plugin for Open Live Writer which would utilize SyntaxHighlighter, but I found a way how to install it manually and want to share it with you. Of course this approach is not so convenient as using plugin but it is better than nothing.

First of all I would like to mention that at the moment of writing this post official project build script on GitHub doesn’t work because of the following issue: Building: loadReposFromCache(...).error is not a function. So I will describe manual installation.

1. First of all you need to encode your source code to replace < and > by &lt; and &gt; e.g. using this page: https://opinionatedgeek.com/Codecs/HtmlEncoder.

2. Then put your source code within <pre class="brush: {brush_name}"></pre> tags (you need to use Source table of Open Live Writer for that). Here {brush_name} should be replaced with brush name for used programming language. List of supported brushes can be found here: https://github.com/syntaxhighlighter/syntaxhighlighter/wiki/Brushes-and-Themes. Click on your programming language title and found brush.js file – if you will scroll it you will find exact brush aliases which can be used in class attribute. E.g. for C#:

Brush.aliases = ['c#', 'c-sharp', 'csharp'];

So for C# and XML tags will be the following:

<pre class="brush: csharp"></pre>
<pre class="brush: xml"></pre>

3. Add the following css and script references to the source tab of your post on top:

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shAutoloader.js' type='text/javascript'></script>

These 4 references are common – they will be needed for all your posts. After them add references to needed brushes (which programming languages will be used in your post. List of exact file names can be found here: https://cdnjs.com/libraries/SyntaxHighlighter). E.g. if we use XML, javascript, css and C# we need to add the following references:
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>

If you don’t want to use CDN from http://alexgorbatchev.com you may copy these files to your Google Drive and use them like described in the following article: http://www.bloggerseolab.com/2017/02/host-images-javascript-and-css-on-google-drive.html.

4. After above references add javascript call which will make exact highlight:

<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function(event) { 
    SyntaxHighlighter.highlight();
  });
</script>

After that publish your post and enjoy of syntax highlighting). In this post I used same method for highlighting last code sample so you may see how it works.