From 9cdfdb699c20e59e40c1234b1aa899f68c10c674 Mon Sep 17 00:00:00 2001
From: Michael Rose <est.michael@gmail.com>
Date: Tue, 23 Feb 2016 12:11:13 -0500
Subject: [PATCH] Get GFM fenced code blocks working - For simplicity remove
 other styles of code block examples and stick with what GitHub uses

---
 _posts/2013-08-16-code-highlighting-post.md | 113 ++++++--------------
 _sass/typography.scss                       |   1 -
 2 files changed, 35 insertions(+), 79 deletions(-)

diff --git a/_posts/2013-08-16-code-highlighting-post.md b/_posts/2013-08-16-code-highlighting-post.md
index 4125eb75..78461976 100644
--- a/_posts/2013-08-16-code-highlighting-post.md
+++ b/_posts/2013-08-16-code-highlighting-post.md
@@ -2,97 +2,37 @@
 title: Syntax Highlighting Post
 excerpt: "Demo post displaying the various ways of highlighting code in Markdown."
 tags: [sample post, code, highlighting]
-modified: 2016-02-01
+modified: 2016-02-23T12:08:33-05:00
 ---
 
 Syntax highlighting is a feature that displays source code, in different colors and fonts according to the category of terms. This feature facilitates writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct. Highlighting does not affect the meaning of the text itself; it is intended only for human readers.[^1]
 
 [^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>
 
-### Highlighted Code Blocks
+### GFM Code Blocks
 
-To modify styling and highlight colors edit `/_sass/syntax.scss`.
+GitHub Flavored Markdown [fenced code blocks](https://help.github.com/articles/creating-and-highlighting-code-blocks/) are supported. To modify styling and highlight colors edit `/_sass/syntax.scss`.
 
-{% highlight css %}
+```css
 #container {
-    float: left;
-    margin: 0 -240px 0 0;
-    width: 100%;
+  float: left;
+  margin: 0 -240px 0 0;
+  width: 100%;
 }
-{% endhighlight %}
+```
 
-{% highlight html %}
-{% raw %}
-<nav class="pagination" role="navigation">
-    {% if page.previous %}
-        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
-    {% endif %}
-    {% if page.next %}
-        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
-    {% endif %}
-</nav><!-- /.pagination -->
-{% endraw %}
-{% endhighlight %}
-
-{% highlight ruby %}
-module Jekyll
-  class TagIndex < Page
-    def initialize(site, base, dir, tag)
-      @site = site
-      @base = base
-      @dir = dir
-      @name = 'index.html'
-      self.process(@name)
-      self.read_yaml(File.join(base, '_layouts'), 'tag_index.html')
-      self.data['tag'] = tag
-      tag_title_prefix = site.config['tag_title_prefix'] || 'Tagged: '
-      tag_title_suffix = site.config['tag_title_suffix'] || '&#8211;'
-      self.data['title'] = "#{tag_title_prefix}#{tag}"
-      self.data['description'] = "An archive of posts tagged #{tag}."
-    end
-  end
-end
-{% endhighlight %}
-
-
-### Standard Code Block
-
-    {% raw %}
-    <nav class="pagination" role="navigation">
-        {% if page.previous %}
-            <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
-        {% endif %}
-        {% if page.next %}
-            <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
-        {% endif %}
-    </nav><!-- /.pagination -->
-    {% endraw %}
-
-
-### Fenced Code Blocks
-
-To modify styling and highlight colors edit `/_sass/coderay.scss`. Line numbers and a few other things can be modified in `_config.yml`. Consult [Jekyll's documentation](http://jekyllrb.com/docs/configuration/) for more information.
-
-~~~ css
-#container {
-    float: left;
-    margin: 0 -240px 0 0;
-    width: 100%;
-}
-~~~
-
-~~~ html
+```html
 {% raw %}<nav class="pagination" role="navigation">
-    {% if page.previous %}
-        <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
-    {% endif %}
-    {% if page.next %}
-        <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
-    {% endif %}
+  {% if page.previous %}
+    <a href="{{ site.url }}{{ page.previous.url }}" class="btn" title="{{ page.previous.title }}">Previous article</a>
+  {% endif %}
+  {% if page.next %}
+    <a href="{{ site.url }}{{ page.next.url }}" class="btn" title="{{ page.next.title }}">Next article</a>
+  {% endif %}
 </nav><!-- /.pagination -->{% endraw %}
-~~~
+```
 
-~~~ ruby
+```ruby
 module Jekyll
   class TagIndex < Page
     def initialize(site, base, dir, tag)
@@ -110,7 +50,24 @@ module Jekyll
     end
   end
 end
-~~~
+```
+
+### Code Blocks in Lists
+
+Indentation matters. Be sure the indent of the code block aligns with the first non-space character after the list item marker (e.g., `1.`). Usually this will mean indenting 3 spaces instead of 4.
+
+1. Do step 1.
+2. Now do this:
+   
+   ```ruby
+   def print_hi(name)
+     puts "Hi, #{name}"
+   end
+   print_hi('Tom')
+   #=> prints 'Hi, Tom' to STDOUT.
+   ```
+        
+3. Now you can do this.
 
 ### GitHub Gist Embed
 
diff --git a/_sass/typography.scss b/_sass/typography.scss
index 334f5e51..873c4ada 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -153,7 +153,6 @@ li {
 	code {
 		@include font-rem(12);
 		line-height: 1.5;
-		white-space: nowrap;
 		margin: 0 2px;
 		padding: 0 5px;
 		border: 1px solid lighten($black, 90);