Skip to main content

How to add SyntaxHighlighter to Blogger

SyntaxHighlighter is a code syntax highlighter developed in Javascript. It can be used to highlight code snippets in your blogs to improve the readability.

This blog looks at how SyntaxHighlighter can be installed in Blogger. As per the official website, the installation instructions are as follows:

1. Install the base files:
    * https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js
    * https://alexgorbatchev.com/pub/sh/current/styles/shCore.css

2. Install the theme
    * https://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css

3. Install the brushes you want
    * https://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js
    * https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js
    * https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js

4. Invoke SyntaxHighlighter during page load and execute the following functions for blogger:
    * SyntaxHighlighter.config.bloggerMode = true;
    * SyntaxHighlighter.all();

The resultant code snippet will be as shown below:
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shCore.js" />
<link href="https://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="https://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css" />
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js" />
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js" />
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js" />
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js" />
<script src="https://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js" />

<script language="javascript" >
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

In order to add this script to your blog's template, you need to go to "Theme > Edit Html" as shown below:

Click inside the textbox that opens containing the html and do CTRL+F and search for /head.
Now copy the code snippet we have created and paste it above the </head> tag as shown below:


Once the code is copied, click on the save button at the bottom right. This will update the template.

In order to use the SyntaxHighlighter on your code snippets, you need to enclose them in <pre> tags as shown below:
<pre code="brush: python">
import sys
import random
import time

def add(x, y):
 return x+y
</pre>

It will result in below highlighted snippet:
import sys
import random
import time

def add(x, y):
 return x+y

Gotchas

1. When saving the template Blogger was returning a failure message but the data was getting saved properly.
2. http://alexgorbatchev.com/pub/sh/current/ is resulting in a redirect to the latest version of the library http://alexgorbatchev.com/pub/sh/3.0.83. Due to some reason the code was not working with the redirect. I had success when I used the 3.0.83 version directly to avoid redirecting. 
3. Check all the links specified in the javascript. For me
http://alexgorbatchev.com/pub/sh/3.0.83/styles/shThemeDefault.css was returning a 404. So used shThemeEclipse.css instead which was reachable.
4. Dynamic Theme has a different script loading mechanism and may not support SyntaxHighlighter. You may need to do some tweaks go get it running.

Fixing Blocked loading mixed active content problem

All modern browsers block loading scripts from a http site when the initial request was on https. Blogger defaults to using https. When loading the SyntaxHighlither code you may see that the scripts are not getting executed on the page and when you check the webconsole (Ctrl + Shift + I) you may see that the browser is throwing errors saying its blocking loading mixed active content for SyntaxHighlither.


The surprising observation here is that SyntaxHighlighter is getting downloaded on http while we have given a https url.

Found a message from Alex Gorbatchev explaining one possible reason for this.
A quick check with Curl throws some light on this behavior:


What we see is that the https url is getting redirected to a http site and due to this the browser is blocking the SyntaxHighlighter content.

One solution I found to this issue was to use an alternative CDN. After changes my final script looks as below:
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shCore.js" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shCore.css" rel="stylesheet" type="text/css" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/styles/shThemeEclipse.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushJava.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushXml.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushBash.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPlain.js" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/SyntaxHighlighter/3.0.83/scripts/shBrushPython.js" />
<script language="javascript" >
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

Part-2 : Checkout part-2 for some demo snippets highlighted with SytaxHighlighter
Labels:

Comments

Post a Comment

Popular posts from this blog

Solved: Fix for Git clone failure due to GnuTLS recv error (-9)

My devstack installation was failing with an error reported by the GnuTLS module as shown below: $ git clone https://github.com/openstack/horizon.git /opt/stack/horizon --branch master Cloning into '/opt/stack/horizon'... remote: Counting objects: 154213, done. remote: Compressing objects: 100% (11/11), done. error: RPC failed; curl 56 GnuTLS recv error (-9): A TLS packet with unexpected length was received. fatal: The remote end hung up unexpectedly fatal: early EOF fatal: index-pack failed The following Git config changes fixed the issue for me. Am hoping it will be useful for someone out there: $ git config http.sslVerify false $ git config --global http.postBuffer 1048576000
14 comments
Read more

Openstack : Fixing Failed to create network. No tenant network is available for allocation issue.

Assumptions : You are using ML2 plugin configured to use Vlans If you try to create a network for a tenant and it fails with the following error: Error: Failed to create network "Test": 503-{u'NeutronError': {u'message': u'Unable to create the network. No tenant network is available for allocation.', u'type': u'NoNetworkAvailable', u'detail': u''}} The problem can be due to missing configuration in the below files: In /etc/neutron/plugins/ml2/ml2_conf.ini network_vlan_ranges =physnet1:1000:2999 (1000:2999 is the Vlan range allocation) In /etc/neutron/plugins/openvswitch/ovs_neutron_plugin.ini bridge_mappings = physnet1:br-eth1 (in OVS we map the physical network to the OVS bridge) Note You should have created a bridge br-eth1 manually and mapped it to a port ovs-vsctl add-br br-eth1 ovs-vsctl add-port br-eth1 eth1 Once configuration is done, restart the neutron ovs agent on the compute node(s): ...
1 comment
Read more

QuickBite: Tap Vs Veth

Linux supports virtual networking via various artifacts such as: Soft Switches (Linux Bridge, OpenVSwitch) Virtual Network Adapters (tun, tap, veth and a few more) In this blog, we will look at the virtual network adapters tap and veth. From a practical view point, both seem to be having the same functionality and its a bit confusing as to where to use what. A quick definition of tap/veth is as follows: TAP A TAP is a simulated interface which exists only in the kernel and has no physical component associated with it. It can be viewed as a simple Point-to-Point or Ethernet device, which instead of receiving packets from a physical media, receives them from user space program and instead of sending packets via physical media writes them to the user space program. When a user space program (in our case the VM) gets attached to the tap interface it gets hold of a file descriptor, reading from which gives it the data being sent on the tap interface. Writing to the file descri...
5 comments
Read more