Add Pygments cod highlighting

_posts/2011-03-10-sample-post.md

@@ -79,13 +79,13 @@ HTML and CSS are our tools. Mauris a ante. Suspendisse quam sem, consequat at, c
 
 ## Code Snippets
 
-~~~ css
+{% highlight css %}
 #container {
   float: left;
   margin: 0 -240px 0 0;
   width: 100%;
 }
-~~~
+{% endhighlight %}
 
 ## Buttons
 

_posts/2013-05-22-sample-post-images.md

@@ -20,13 +20,13 @@ Here are some examples of what a post with images might look like. If you want t
 
 Apply the `half` class like so to display two images side by side that share the same caption.
 
-~~~ html
+{% highlight html %}
 <figure class="half">
 	<img src="/images/image-filename-1.jpg">
 	<img src="/images/image-filename-2.jpg">
 	<figcaption>Caption describing these two images.</figcaption>
 </figure>
-~~~
+{% endhighlight %}
 
 And you'll get something that looks like this:
 
@@ -40,14 +40,14 @@ And you'll get something that looks like this:
 
 Apply the `third` class like so to display three images side by side that share the same caption.
 
-~~~ html
+{% highlight html %}
 <figure class="third">
 	<img src="/images/image-filename-1.jpg">
 	<img src="/images/image-filename-2.jpg">
 	<img src="/images/image-filename-3.jpg">
 	<figcaption>Caption describing these three images.</figcaption>
 </figure>
-~~~
+{% endhighlight %}
 
 And you'll get something that looks like this: