Adding source code syntax highlighting to a Google Blogger blog

This post describes how to add source code syntax highlighting to a Google Blogger blog in few simple steps.

Step 1. Open Blogger dashboard.

Step 2. Find you blog and click Design link:

Step 3. Click the Edit HTML link:

Step 4. Find the </head> closing tag:

Step 5. Insert the following lines (in blue) just before the </head> tag:

</b:skin>
  <link href='http://yandex.st/highlightjs/5.12/styles/default.min.css' rel='stylesheet'/>
  <script src='http://yandex.st/highlightjs/5.12/highlight.min.js'></script>
  <script>
    hljs.tabReplace = '    ';
    hljs.initHighlightingOnLoad();
  </script>
</head>

Step 6. Click the Save Template button.

Step 7. In your posts, put your source code between the <pre><code> … </code></pre> tags:

<pre><code>
using System;

public class Program
{
    public static int Main(string[] args)
    {
</code></pre>

Highlight.js will automatically highlight syntax in your code examples:

using System;

public class Program
{
    public static int Main(string[] args)
    {