Thursday, December 11, 2014

Writing blog posts on blogger with code snippets made easy

In my mindstorms hacking projects I need quite some code. And I want to blog about it, but the default editor in Blogger.com doesn’t have a button to mark text as code. You can abuse the blockquote, or add the <code> tag by hand, but it’s quite a hassle. The solution proved the be the brilliant StackEdit web app! It’s so amazing, I’m going to pay the little fee they ask.

With it you can write your blog post using markdown. And with the code blocks like GitHub has them in the readme.md file. Actually I got the idea to use markdown for blogging when I was writing a readme. Markdown is so much easier to use than a wysiwyg editor or typing all the HTML tags manually.

Here’s how to use it on your blogger.com blog.

1. Edit the html of your blogger blog

In the blogger dashboard go to ‘template’ and click the ‘Edit HTML’ button. Then, just above the closing <\HEAD> tag insert this:

<link href='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/zenburn.min.css' rel='stylesheet'/>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js'/>
<script>hljs.initHighlightingOnLoad();</script>

2. Go to StackEdit.io and write something interesting about code

StackEdit is mostly self-explanatory. So start writing and then click the hash icon on the top left. Choose: Publish > Blogger and there you are! A great blogpost with minimal typing and layout effort!