How to add syntax highlighting to Blogger

Blogger has a lot of great widgets built in to include various funcionality in your blog, but syntax highlighting is not one of them. Fortunately it is fairly easy to add this capability, you just have to do some customizing as described below.

Add custom CSS and JavaScript includes to the template

As the first step you have to include the CSS and JavaScript code into the template you are currently using. On you blog’s admin panel select Template and click Edit HTML.

template_edit_html_2014_01_19

In the code search for the </head> tag and just before that insert the following code.

<!-- Syntax Highlighter START -->
<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushAS3.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushColdFusion.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDelphi.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushDiff.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushErlang.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushGroovy.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJavaFX.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPowerShell.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushScala.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>

<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter END -->

Add code to your post

Go to the post editor screen and switch to HTML view.

post_edit_screen_2014_01_19

In the HTML view paste your code and surround it with a <pre> tag, and set the highlighting mode in the class attribute of the tag. Here is an example of that.

<pre class="brush:java">
public static void main(String[] args) {
    System.out.println("Hello World!");
}

This produces the following output:

public static void main(String[] args) {
    System.out.println("Hello World!");
}

Keep in mind that if you have angle brackets in your code then you have to escape them (with this tool for example), otherwise it will be interpreted as part of the HTML.

Getting rid of unnecessary brushes

The code I pasted above contains a lot of brushes, which make it possible to use a lot of different highlighting methods. However if you know for sure that you will never need some of them, then you can just delete the unnecessary ones saving some HTTP requests.

Use other themes

There are a few CSS themes available on the author’s website if you would like to change the appearance of the code blocks.

Warning

With certain Blogger themes this method may not work.

Pictures uploaded to Blogger post become grey

Recently I was writing my first ever blog post and wanted to include some screenshots in it. I uploaded the screenshots in Blogger’s editor and I noticed that something was off with them. It became even more apparent when I published the post and viewed it on the live site.

The images had too much grey in them. My first though was that I messed them up when converting to a smaller size, but quickly ruled out this possibility when I saw that the images on my local drive had no traces of the unwanted greyness.

The first image is the original, the second is after it was uploaded to blogger.

example_image_white_2014_01_19

example_image_grey_2014_01_19

It turned out that Google has some “smart” algorithms which try to enhance to quality of your uploaded images. And of course it is enabled by default. I don’t know how they perform on regular pictures taken for example on a holiday, but they definitely do bad for screenshots with a lot of white in them.

The following images illustrate step-by-step how to turn this feature off:

google_plus_profile_button_2014_01_19

google_plus_settings_button_2014_01_19

google_plus_auto_enhance_auto_awsome_2014_01_19