How to insert code snippets to Blogger blogs

This is my third day, i.e. roughly more than 2 hours, playing with Blogger. So, this post reflects my minimal knowledge of the system. If you have better solutions, please drop me a comment below. So far, I really like Blogger for its simplicity. However, I didn't find a nice and efficient way to put code snippets into my blog posts. A quick google search reveals that many people have struggled with this problem before. The most popular solution I found is SyntaxHighlighter, written by Alex Gorbatchev.

Use SyntaxHighlighter

Just in case you're not familiar with it, follow the steps below:

1. Use this generator to generate the links to css and javascript files. The generator lets you choose the theme, and the languages that you like to support. Among the generated files, shCore.* and shTheme*.css are required, other files shBrush*.js are based on your need.
2. Copy the links generated in step 1 and paste into your Blogger's template file, right above </head> tag.
3. Save your template.
4. In your posts, wrap your code snippets inside the tags: <pre class="brush: language-name"> </pre>

It's a very nice tool. However, I don't like the question mark appears on every of my code snippets, which links to a site to ask to support the developer. It's a nice thing to do but I feel it's too invasive. The margin, padding is also not as I want. I will have to add some css to customize it the way I want.

Another popular suggestion is using gist.

Use gist

1. Go to gist on github or a similar git-based SVM site
2. Paste your code there and generate a gist
3. Then copy the embeded url and paste to your posts

The result looks very good with syntax highlighted. You may have to add your custom css to make the background fit your theme. However, I feel it adds a lot of overhead switching to github to generate the code for every snippet. This solution also helps keep your code clean because every snippet is just one embeded url. However, it has its own disadvantage. If you need to make some quick update to your snippets, it's not clear which one is which and you have to go to gist for any minor update.

Another similar solution is to use hilite.me. However, besides the overhead of switching context, the code generated by this tool is very long because of inline css.

Roll my own solution

After trying all existing solutions that I found, I realize that, for my posts, syntax highlight is not important. I usually post very small code snippet. If I need to go longer, I'd rather link to github. I only want to make the code snippets standout from the remaining text. So, I made some quick custom css to add to Blogger template. Here it is:

pre code {
  display: block; 
  overflow: scroll; 
  -webkit-overflow-scrolling: touch;
  padding: 0 0.5em 1em;
  border-radius: 0.5em;
  background-color: #1b2426;
}

It's not a perfect solution. It might not even work as expected on all browsers. However, it meets my needs and small enough to maintain and update in the future.