Modified CSS to add padding for code blocks back. Also modified syntax highlighting examples.

1 files changed, 48 insertions, 66 deletions

diff --git a/exampleSite/content/posts/code-highlighting-post.md b/exampleSite/content/posts/code-highlighting-post.md
index 1c11200..7d491e1 100644
--- a/exampleSite/content/posts/code-highlighting-post.md
+++ b/exampleSite/content/posts/code-highlighting-post.md
@@ -15,30 +15,51 @@ Syntax highlighting is a feature that displays source code, in different colors
 
 [^1]: <http://en.wikipedia.org/wiki/Syntax_highlighting>
 
-### Highlighted Code Blocks
+### GFM Code Blocks
 
-To modify styling and highlight colors edit `/static/css/_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`.
 
 ```css
 #container {
-    float: left;
-    margin: 0 -240px 0 0;
-    width: 100%;
+  float: left;
+  margin: 0 -240px 0 0;
+  width: 100%;
 }
 ```
 
-```html
+```scss
+.highlight {
+  margin: 0;
+  padding: 1em;
+  font-family: $monospace;
+  font-size: $type-size-7;
+  line-height: 1.8;
+}
+```
+
+{{< highlight html >}}
 <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 -->
-```
+{{< / highlight >}}
 
-```ruby
+{{< highlight html "linenos=inline" >}}
+<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 -->
+{{<  / highlight >}}
+
+``` ruby
 module Jekyll
   class TagIndex < Page
     def initialize(site, base, dir, tag)
@@ -58,64 +79,25 @@ module Jekyll
 end
 ```
 
+### Code Blocks in Lists
 
-### Standard Code Block
-
-    <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 -->
+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:
 
-### Fenced Code Blocks
+   ```ruby
+   def print_hi(name)
+     puts "Hi, #{name}"
+   end
+   print_hi('Tom')
+   #=> prints 'Hi, Tom' to STDOUT.
+   ```
 
-To modify styling and highlight colors edit `/static/css/_sass/_coderay.scss`.
-
-~~~ css
-#container {
-    float: left;
-    margin: 0 -240px 0 0;
-    width: 100%;
-}
-~~~
-
-~~~ html
-<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 -->
-~~~
-
-~~~ 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
-~~~
+3. Now you can do this.
 
 ### GitHub Gist Embed
 
 An example of a Gist embed below.
 
-<script src="https://gist.github.com/mmistakes/43a355923921d22cd993.js"></script>
+{{< gist mmistakes 6589546 >}}