Showing posts with label Blogger. Show all posts
Showing posts with label Blogger. Show all posts

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
Posted by at 7 comments:
Labels: , , , , , ,

Friday, June 19, 2015

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



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
Posted by at 6 comments:
Labels: , , , , ,
Subscribe to: Posts (Atom)