Blogger: Setup "SyntaxHighlighter" for your blog

Objective

Install "SyntaxHighlighter" on Google-Drive to make it easy to format your source-code on your blog on Blogger. This is needed, because the original hosting service of "SyntaxHighlighter" only supports "http" which Google does not like anymore for security reasons. Installing the needed files on Google-Drive will solve the problem and will serve the needed Javascript and CSS files via "https".

Motivation

This time I wanted to write a new blog article containing C++ code. I was not very keen of manually highlighting the code-snippets like I did in my first blog article about implementing a Java "synchronized" keyword in C++. Therefore I searched the web for a Syntax-Highlighter. I found many online solutions where you can copy&paste your code into a textarea to get html-code for your source-code that can be copied into your blogs source-text. Unfortunatelly this is not very practical nor flexible if you change or edit of your code while writing the blog article or even later. I needed a solution where you just copy&paste your raw-source-code into your blogs text. Ok, maybe you need to assign some specific style, but that's ok. In the end, I found "SyntaxHighlighter" a Javascript and CSS framework written by Alex Gorbatchev. I tried it in my Test-Blog and unfortunatelly noticed that the default hosting that Mr. Gorbatchev provided on his homepage is only "http" and not "https". Since a few weeks ago, links with only "http" do not work anymore with Blogger and Google-Chrome. Therefore I had to find an easy solution, to host the "SyntaxHighlighter" scripts myself via "https". I found out, that I very neat solution herefore is, to copy the needed files to your Google-Drive and make them publically accessible. This was the solution of my choice, because I already use the blogging service that Google provides.

Prerequisites

• Google Account
• SyntaxHighlighter (http://alexgorbatchev.com/SyntaxHighlighter/)

Solution

Get SyntaxHighlighter

Download SyntaxHighlighter from http://alexgorbatchev.com/SyntaxHighlighter/download/ and unzip it (in my case version 3.0.83):

$> unzip syntaxhighlighter_3.0.83.zip

Archive: syntaxhighlighter_3.0.83.zip
creating: syntaxhighlighter_3.0.83/
...
inflating: syntaxhighlighter_3.0.83/index.html
inflating: syntaxhighlighter_3.0.83/LGPL-LICENSE
inflating: syntaxhighlighter_3.0.83/MIT-LICENSE
creating: syntaxhighlighter_3.0.83/scripts/
inflating: syntaxhighlighter_3.0.83/scripts/shAutoloader.js
...
inflating: syntaxhighlighter_3.0.83/scripts/shBrushCpp.js
...
inflating: syntaxhighlighter_3.0.83/styles/shThemeRDark.css
creating: syntaxhighlighter_3.0.83/tests/
...

DEPRECATED SECTION : Setup your Hosting of SyntaxHighlighter on Google-Drive

The following section is deprecated. Due to the fact that Google deprecated web-hosting support in Google-Drive as of 31. August 2015 (Reference: https://gsuiteupdates.googleblog.com/2015/08/deprecating-web-hosting-support-in.html).
However, the web-hosting via Google-Drive stopped working only a year later as of 31. August 2016.

An alterative to host your javascript files is using github-pages.
So skip this section or jump directly to Blogger: Host "SyntaxHighlighter" on GitHub-Pages

Setup your Hosting of SyntaxHighlighter on Google-Drive

1. Create your folder

Log into your Google Drive account. Create a folder, by clicking "New" and then "Folder". Choose where you want to store your SyntaxHighlighter files. I named the root folder "Blog" and even created a subfolder named "SyntaxHighlighter" to create kind of a directory hierarchy in case I want also to host other packages in future.



Within the folder "SyntaxHighlighter" create 2 subfolders "scripts" and "styles".

2. Share your folder

Select the folder and then click the Share button.



Click on advanced and choose "change..."



then choose "On - Public on the web" in the next dialog



and click "Save".

3. Upload the necessary files from SyntaxHighlighter

Navigate back into your "Blog/SyntaxHighligter/scripts" folder and choose "File upload".



Now, navigate to the local folder where you unzipped the source of syntaxhighlighter_3.0.83.zip and go into the subfolder "scripts". Here you have to select at least "shCore.js" and minimum a "shBrushXX.js" file. The "shBrushXX.js" files specify which languages will be highlighted later on on your blog. I only have choosen "shBrushCpp.js" for the moment.

Navigate into "styles" folder and choose "File upload" again. Upload at least "shCore.css" and "shThemeDefault.css" from the "styles" folder of your local Hightlighter sources.

Prepare your template to support code formatting

Go to your Blogger's blog online editor and choose "Template" from the menu at the left.




Click on "Edit HTML".

Within the code search for the closing head-tag

</b:template-skin>
    <b:include data='blog' name='google-analytics'/>
  </head>

  <body expr:class='&quot;loading&quot; + data:blog.mobileClass'>
  <b:section class='navbar' id='navbar' maxwidgets='1' name='Navbar' showaddelement='no'>

And copy the following code (only the links to the files you prepared for hosting) right before the end head-tag

<!-- Begin SyntaxHighlighter-->
    <link href='https://googledrive.com/host/xxxxx/styles/shCore.css' rel='stylesheet' type='text/css'/> 
    <link href='https://googledrive.com/host/xxxxx/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
    <script src='https://googledrive.com/host/xxxxx/scripts/shCore.js' type='text/javascript'/> 
 <script src='https://googledrive.com/host/xxxxx/scripts/shBrushCpp.js' type='text/javascript'/> 
    <!--script src='https://googledrive.com/host/xxxxx/scripts/shBrushCpp.js' type='text/javascript'/--> 
    <!--script src='https://googledrive.com/host/xxxxx/scripts/shBrushCSharp.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/xxxxx/scripts/shBrushCss.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/xxxxx/scripts/shBrushJava.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/xxxxx/scripts/shBrushJScript.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/xxxxx/scripts/shBrushPhp.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/xxxxx/scripts/shBrushPython.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/xxxxx/scripts/shBrushRuby.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/xxxxx/scripts/shBrushSql.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/xxxxx/scripts/shBrushVb.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/xxxxx/scripts/shBrushXml.js' type='text/javascript'/> 
    <script src='https://googledrive.com/host/xxxxx/scripts/shBrushPerl.js' type='text/javascript'/--> 
    <script type='text/javascript'>
    window.setTimeout(function() {
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.all();
    }, 20);
    </script>
<!-- End SyntaxHighlighter-->
</head>

The strange "xxxxx" is the placeholder for your very own share id. You can find your share-id, when you choose again the folder "SyntaxHighlighter" on your Google-Drive. Exchange all "xxxxx" in the code above by your share-id, e.g. "ZsTjl4Sjl0YmQ4SmNTh6WavThstZbGR0Mm1ydQAfm9oWlhkQlNRJSm9wQ3Z0Bxn0jvqYuNlU".

Test it

Let's put some source-code into a blog article to check if it shows up correctly. There are 2 possibilities how to do this:

Method 1:

<script type="syntaxhighlighter" class="brush: cpp"><![CDATA[
// 'Hello World!' program 
 
#include <iostream>
 
int main()
{
  std::cout << "Hello World!" << std::endl;
  return 0;
}
]]></script>

Result:



Method 2:

<pre class="brush: cpp">
// 'Hello World!' program 
 
#include &lt;iostream&gt;
 
int main()
{
  std::cout << "Hello World!" << std::endl;
  return 0;
}
</pre>

Result:

// 'Hello World!' program 
 
#include <iostream>
 
int main()
{
  std::cout << "Hello World!" << std::endl;
  return 0;
}

Great! It works! Have fun!

References:

1. http://alexgorbatchev.com/SyntaxHighlighter/
2. Embed Code Syntax Highlighting in Blog
3. How to Host JavaScript or CSS Files on Google Drive