Syntax Highlighter With Blogger

Posted on |
Previously I've been using SyntaxHighlighter by Alex Gorbatchev. It needs too much javascript configuration on blogger and hard to change styles.

One alternative is github gist. However for every code snippet you need to create a gist on github. Thus code and blog are maintained separately. Do I really need the code snippet to be so formal, correct and version controlled? No.

After a couple hours research, google's code prettify stands out. (https://github.com/google/code-prettify)
Simply adding a <script> tag in html head, and enclosing code with <pre> would do the job. 
/**
 * pretty print
 */
function foo()
{
  if (counter <= 10)
    return;
    // it works!
}

How-To Guide

1. Blogger dashboard -> Theme -> Edit HTML

Add following line.
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?skin=desert"></script>

2. Blogger dashboard -> Theme -> Customize -> Advanced -> Add CSS

Add following css.
.info {
  background-color:#EEEEEE;
  font-family:Consolas,"Courier New",Monaco,"Lucida Console","Liberation Mono","DejaVu Sans Mono","Bitstream Vera Sans Mono";
  font-style: italic;
}
pre.prettyprint{
  width: auto;
  overflow: auto;
  padding: 10px; 
}

3. Use info and prettyprint classes in blog post

<span class="info">info<span>
<pre class="prettyprint">code</pre>

Lessons Learned

Writing in html is not an easy job. You need to remember escaping all html syntax.
For example, "adding a <script> tag in html" in html writing needs to be "adding a &lt;script&gt; tag in html". Otherwise it would complain you don't have a enclosing <script> tag.

Also, there are two ways of displaying an html entity. (w3schools)
&entity_name;
  OR
&#entity_number;

So a less than sign (<) can be either &lt; or &#60;