Sunday, December 4, 2016

Blogger: Host "SyntaxHighlighter" on GitHub-Pages

Objective


I would like to host my "SyntaxHighlighter" on Github-Pages to make it easy to format my source-code on my blog on Blogger. This is needed, because the original hosting service of Google-Drive is not working anymore..

Motivation


In a comment, a reader of my blog made me aware, that the syntax highlighting for source-code stopped working a while ago. So I investigated into the issue and found out that unfortunately Google stopped web-hosting of pages via Google-Drive.

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.

I did neither want to move on to Google Domains nor to the Google Cloud Platform,because both services are not free, so I decided to give Github-Pages a try.

Prerequisites



Setup your Hosting of SyntaxHighlighter on Github-Pages


Prepare your local repository


Follow the instructions in to get the sources for SyntaxHighlighter.

Create a directory for your new repository named e.g. syntaxhighlighter-pages/docs:
$> mkdir -p syntaxhighlighter-pages/docs
$> cd syntaxhighlighter-pages
$> git init

Initialized empty Git repository in /home/cschmidt/syntaxhighlighter-pages/.git/

Assuming your SyntaxHighlighter files are at the some location as your syntaxhighlighter-pages folder, copy all the source files your need to be hosted into your docs folder:

$> cd docs
$> cp -r ../../syntaxhighlighter_3.0.83/scripts .
$> cp -r ../../syntaxhighlighter_3.0.83/styles .
$> git add *
$> git commit -m "hosted syntaxhighlighter files"

[master (root-commit) 3556ca1] hosted syntaxhighlighter files
45 files changed, 5483 insertions(+)
create mode 100644 docs/scripts/shAutoloader.js
create mode 100644 docs/scripts/shBrushAS3.js
create mode 100644 docs/scripts/shBrushAppleScript.js
create mode 100644 docs/scripts/shBrushBash.js
...
create mode 100644 docs/styles/shThemeEmacs.css
create mode 100644 docs/styles/shThemeFadeToGrey.css
create mode 100755 docs/styles/shThemeMDUltra.css
create mode 100644 docs/styles/shThemeMidnight.css
create mode 100644 docs/styles/shThemeRDark.css

Finally push your local repository to your github:

$> cd ..
$> git remote add origin https://github.com/cwschmidt/syntaxhighlighter-pages.git
$> git push -u origin master

Counting objects: 50, done.
Delta compression using up to 2 threads.
Compressing objects: 100% (49/49), done.
Writing objects: 100% (50/50), 47.03 KiB | 0 bytes/s, done.
Total 50 (delta 24), reused 0 (delta 0)
remote: Resolving deltas: 100% (24/24), done.
To https://github.com/cwschmidt/syntaxhighlighter-pages_.git
* [new branch] master -> master
Branch master set up to track remote branch master from origin.


Prepare your github repository


Now log into your github account and create a new repository named "syntaxhighlighter-pages". Herefore click on the "+" on the upper-right corner of the Github webpage.



Fill in the name of the repository and make it "public" as shown below (didn't test, whether publiching pages also works with "private" ones):



Select the actual created repository and go to the settings tab shown below.
Scroll down until you reach the section "Github Pages". From the combo-box where "None" is selected right now, select "master branch /docs folder".



Click "Save" and after some seconds, your pages are successfully published:




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://<username>.github.io/syntaxhighlighter-pages/styles/shCore.css' rel='stylesheet' type='text/css'/> 
    <link href='https://<username>.github.io/syntaxhighlighter-pages/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shCore.js' type='text/javascript'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushCpp.js' type='text/javascript'/> 
    <!--script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushCpp.js' type='text/javascript'/--> 
    <!--script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushCSharp.js' type='text/javascript'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushCss.js' type='text/javascript'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/shBrushJava.js' type='text/javascript'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushJScript.js' type='text/javascript'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushPhp.js' type='text/javascript'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushPython.js' type='text/javascript'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushRuby.js' type='text/javascript'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushSql.js' type='text/javascript'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushVb.js' type='text/javascript'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushXml.js' type='text/javascript'/> 
    <script src='https://<username>.github.io/syntaxhighlighter-pages/scripts/shBrushPerl.js' type='text/javascript'/--> 
    <script type='text/javascript'>
    window.setTimeout(function() {
        SyntaxHighlighter.config.bloggerMode = true;
        SyntaxHighlighter.all();
    }, 20);
    </script>
<!-- End SyntaxHighlighter-->
</head>

Exchange the "<username>" within the URL with your own username on Github.


Test it


For Testing go back to my blog post Blogger: Setup "SyntaxHighlighter" for your blog - Test it

References:

  1. http://alexgorbatchev.com/SyntaxHighlighter/
  2. Github-Pages
  3. Blogger: Setup "SyntaxHighlighter" for your blog