Simpler code snippets + magic CSS

_config.yml

@@ -4,18 +4,20 @@ description: "Liquid is a template language and accompanying rendering engine. I
 # Build settings
 baseurl:                "" # the subpath of your site, e.g. /blog/
 url:                    http://liquidmarkup.org # the base hostname & protocol for your site
-markdown:               kramdown
+markdown:               redcarpet
+redcarpet:
+  extensions:           ["with_toc_data", "tables", "disable_indented_code_blocks", "no_intra_emphasis"]
 highlighter:            pygments
 permalink:              pretty
 exclude:
   - README.md
   - CNAME
   - node_modules
-keep_files:             ['css']
+keep_files:             ["css"]
 
 # Front matter defaults
 defaults:
   - scope:
       path: "" # an empty string here means all files in the project
     values:
-      layout: "default"
+      layout: default

_layouts/method.html

@@ -0,0 +1,11 @@
+---
+layout: default
+---
+
+{{ content }}
+
+{% for item in page.examples %}
+
+<code>{{ item }}</code>
+
+{% endfor %}

_sass/modules/_content-area.scss

@@ -2,32 +2,29 @@
   margin-bottom: $spacing-unit * 2;
 }
 
-.code-block {
+.highlight {
+
   pre {
-    border-radius: 0 0 3px 3px;
     border-top: none;
+    border-radius: 0 0 3px 3px;
   }
 
   &:before {
-    padding: 8px 12px;
+    content: "Example";
     display: block;
-    box-sizing: border-box;
+    padding: 8px 12px;
     font-weight: bold;
     color: $color-white;
     background: $color-blue-5;
     border-bottom: none;
     border-radius: 3px 3px 0 0;
+    box-sizing: border-box;
   }
-}
 
-.code-block--input {
-  &:before {
-    content: 'Input';
+  & + .highlight {
+    &:before {
+      content: "Output";
+    }
   }
-}
 
-.code-block--output {
-  &:before {
-    content: 'Output';
-  }
 }

basics/operators.md

@@ -45,40 +45,44 @@ Liquid includes many logical and comparison operators.
 
 For example:
 
-<div>
-{% highlight liquid %}{% raw %}
+```liquid
+{% raw %}
 {% if product.title == "Awesome Shoes" %}
   These shoes are awesome!
 {% endif %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
 You can use multiple operators in a tag:
 
-<div>
-{% highlight liquid %}{% raw %}
+```liquid
+{% raw %}
 {% if product.type == "Shirt" or product.type == "Shoes" %}
   This is a shirt or a pair of shoes.
 {% endif %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
 ## contains
 
 `contains` checks for the presence of a substring inside a string.
 
-{% highlight liquid %}{% raw %}
+```liquid
+{% raw %}
 {% if product.title contains 'Pack' %}
   This product's title contains the word Pack.
 {% endif %}
-{% endraw %}{% endhighlight %}
+{% endraw %}
+```
 
 `contains` can also check for the presence of a string in an array of strings.
 
-{% highlight liquid %}{% raw %}
+```liquid
+{% raw %}
 {% if product.tags contains 'Hello' %}
   This product has been tagged with 'Hello'.
 {% endif %}
-{% endraw %}{% endhighlight %}
+{% endraw %}
+```
 
-`contains` is can only search strings. You cannot use it to check for an object in an array of objects.
+`contains` can only search strings. You cannot use it to check for an object in an array of objects.

basics/truthy-and-falsy.md

@@ -10,45 +10,43 @@ All values in Liquid are truthy except `nil` and `false`.
 
 In the example below, the text "Tobi" is not a boolean, but it is truthy in a conditional:
 
-{% highlight liquid %}{% raw %}
+```liquid
+{% raw %}
 {% assign tobi = 'Tobi' %}
 
 {% if tobi == true %}
   This condition will always be true.
 {% endif %}
-{% endraw %}{% endhighlight %}
+{% endraw %}
+```
 
 [Strings](/basics/types/#string), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty:
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
+```liquid
+{% raw %}
 {% if settings.fp_heading %}
   <h1>{{ settings.fp_heading }}</h1>
 {% endif %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```html
 <h1></h1>
-{% endraw %}{% endhighlight %}
-</div>
+```
 
 [EmptyDrops](/basics/types/#emptydrop) are also truthy. In the example below, if `settings.page` is an empty string or set to a hidden or deleted object, you will end up with an EmptyDrop. The result is an empty div:
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
+```liquid
+{% raw %}
 {% if pages[settings.page] %}
   <div>{{ pages[settings.page].content }}</div>
 {% endif %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```html
 <div></div>
-{% endraw %}{% endhighlight %}
-</div>
+```
 
 ## Falsy
 

basics/types.md

@@ -17,33 +17,33 @@ Liquid variables can be initialized by using the [assign](/tags/#assign) or [cap
 
 Strings are declared by wrapping a variable's value in single or double quotes.
 
-{% highlight liquid %}
+```liquid
 {% raw %}
 {% assign my_string = "Hello World!" %}
 {% endraw %}
-{% endhighlight %}
+```
 
 ## Number
 
 Numbers include floats and integers.
 
-{% highlight liquid %}
+```liquid
 {% raw %}
 {% assign my_int = 25 %}
 {% assign my_float = 39.756 %}
 {% endraw %}
-{% endhighlight %}
+```
 
 ## Boolean
 
 Booleans are either `true` or `false`. No quotations are necessary when declaring a boolean.
 
-{% highlight liquid %}
+```liquid
 {% raw %}
 {% assign foo = true %}
 {% assign bar = false %}
 {% endraw %}
-{% endhighlight %}
+```
 
 ## Nil
 
@@ -53,27 +53,25 @@ Nil is treated as false in the conditions of `if` blocks and other Liquid tags t
 
 In the following example, if the user does not exist (that is, `user` returns `nil`), Liquid will not print the greeting:
 
-{% highlight liquid %}
+```liquid
 {% raw %}
 {% if user %}
   Hello {{ user.name }}!
 {% endif %}
 {% endraw %}
-{% endhighlight %}
+```
 
 Tags or outputs that return `nil` will not print anything to the page.
 
-<div class="code-block code-block--input">
-{% highlight liquid %}{% raw %}
+```liquid
+{% raw %}
 The current user is {{ user.name }}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight text %}{% raw %}
+```text
 The current user is
-{% endraw %}{% endhighlight %}
-</div>
+```
 
 ## Array
 
@@ -83,41 +81,39 @@ Arrays hold lists of variables of any type.
 
 To access all of the items in an array, you can loop through each item in the array using a [for](/tags/#for) or [tablerow](/tags/#tablerow) tag.
 
-<div class="code-block code-block--input">
-{% highlight liquid %}{% raw %}
-<!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" -->
+```liquid
+{% raw %}
+<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
 {% for user in site.users %}
   {{ user }}
 {% endfor %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight text %}{% raw %}
-Tobi Lina Tetsuro Adam
-{% endraw %}{% endhighlight %}
-</div>
+```text
+{% raw %}
+Tobi Laura Tetsuro Adam
+{% endraw %}
+```
 
 ### Accessing specific items in arrays
 
-You can use square bracket `[ ]` notation to access a specific item in an array. Array indexing starts at zero.
+You can use square bracket `[` `]` notation to access a specific item in an array. Array indexing starts at zero.
 
-<div class="code-block code-block--input">
-{% highlight liquid %}{% raw %}
-<!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" -->
+```liquid
+{% raw %}
+<!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
 {{ site.users[0] }}
 {{ site.users[1] }}
 {{ site.users[3] }}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight text %}{% raw %}
+```text
 Tobi
-Lina
+Laura
 Adam
-{% endraw %}{% endhighlight %}
-</div>
+```
 
 ### Initializing arrays
 
@@ -129,12 +125,14 @@ You can, however, use the [split](/filters/#split) filter to break a single stri
 
 An EmptyDrop object is returned if you try to access a deleted object (such as a page or post) by its [handle](/basics/#Handles). In the example below, `page_1`, `page_2` and `page_3` are all EmptyDrop objects.
 
-{% highlight liquid %}{% raw %}
+```liquid
+{% raw %}
 {% assign variable = "hello" %}
 {% assign page_1 = pages[variable] %}
 {% assign page_2 = pages["does-not-exist"] %}
 {% assign page_3 = pages.this-handle-does-not-exist %}
-{% endraw %}{% endhighlight %}
+{% endraw %}
+```
 
 EmptyDrop objects only have one attribute, `empty?`, which is always *true*.
 
@@ -144,17 +142,19 @@ Collections and pages that *do* exist do not have an `empty?` attribute. Their `
 
 Using the `empty?` attribute, you can check to see if an object exists or not before you access any of its attributes.
 
-{% highlight liquid %}{% raw %}
+```liquid
+{% raw %}
 {% unless pages.about.empty? %}
-  <!-- This content will only print if the page with handle 'about' is not empty -->
+  <!-- This will only print if the page with handle 'about' is not empty -->
   <h1>{{ pages.frontpage.title }}</h1>
   <div>{{ pages.frontpage.content }}</div>
 {% endunless %}
-{% endraw %}{% endhighlight %}
+{% endraw %}
+```
 
 If you don't check for emptiness first, Liquid may print empty HTML elements to the page:
 
-{% highlight html %}{% raw %}
+```html
 <h1></h1>
 <div></div>
-{% endraw %}{% endhighlight %}
+```

filters/append.md

@@ -4,19 +4,27 @@ title: append
 
 `append` concatenates two strings and returns the concatenated value.
 
-{% highlight liquid %}
+```liquid
 {% raw %}
 {{ "/my/fancy/url" | append:".html" }}
 {% endraw %}
-# => "/my/fancy/url.html"
-{% endhighlight %}
+```
 
-It can also be used with variables:
+```text
+/my/fancy/url.html
+```
 
-{% highlight liquid %}
+`append` can also be used with variables:
+
+```liquid
 {% raw %}
 {% assign filename = "/index.html" %}
 {{ product.url | append: filename }}
 {% endraw %}
-# => "#{product.url}/index.html"
-{% endhighlight %}
+```
+
+```liquid
+{% raw %}
+{{ product.url }}/index.html
+{% endraw %}
+```

filters/capitalize.md

@@ -4,9 +4,24 @@ title: capitalize
 
 `capitalize` makes the first character of your string capitalized.
 
-| Input                                                      | Output           |
-|:-----------------------------------------------------------|:-----------------|
-| {% raw %}`{{ "title" | capitalize }}`         {% endraw %} | "Title"          |
-| {% raw %}`{{ "my great title" | capitalize }}`{% endraw %} | "My great title" |
+```liquid
+{% raw %}
+{{ "title" | capitalize }}
+{% endraw %}
+```
 
-It only capitalizes the first character, so subsequent words will not be capitalized as well.
+```text
+Title
+```
+
+`capitalize` only capitalizes the first character of the string, so subsequent words are not affected:
+
+ ```liquid
+{% raw %}
+{{ "my great title" | capitalize }}
+{% endraw %}
+```
+
+```text
+My great title
+```

filters/ceil.md

@@ -1,6 +1,8 @@
 ---
 title: ceil
-layout: default
+layout: method
+examples:
+  - 1.2
 ---
 
 `ceil` rounds the input up to the nearest whole number.
@@ -12,4 +14,4 @@ layout: default
 | {% raw %}`{{ 2.0 | ceil }}`   {% endraw %} | 2      |
 | {% raw %}`{{ "18.3" | ceil }}`{% endraw %} | 19     |
 
-It will attempt to cast any input to a number.
+It will attempt to cast any input to a number.

filters/default.md

@@ -2,21 +2,43 @@
 title: default
 ---
 
-`default` offers a means of having a fallback in case your value doesn't exist.
+`default` offers a means of having a fallback in case your value doesn't exist. `default` will use its substitute if the left side is `nil`, `false`, or empty.
 
-{% highlight liquid %}
+In this example, `product_price` is not defined, so the default value is used.
+
+```liquid
 {% raw %}
 {{ product_price | default: 2.99 }}
-// => outputs "2.99"
+{% endraw %}
+```
 
+```text
+2.99
+```
+
+In this example, `product_price` is defined, so the default value is not used.
+
+```liquid
+{% raw %}
 {% assign product_price = 4.99 %}
 {{ product_price | default:2.99 }}
-// => outputs "4.99"
+{% endraw %}
+```
 
+```text
+4.99
+```
+
+In this example, `product_price` is empty, so the default value is used.
+
+```liquid
+{% raw %}
 {% assign product_price = "" %}
 {{ product_price | default: 2.99 }}
-// => outputs "2.99"
 {% endraw %}
-{% endhighlight %}
+```
+
+```text
+2.99
+```
 
-`default` will use its substitute if the left side is `nil`, `false`, or empty.

tags/control-flow.md

@@ -4,10 +4,10 @@ title: Control flow
 
 ## case/when
 
-<p>Creates a switch statement to compare a variable with different values. <code>case</code> initializes the switch statement, and <code>when</code> compares its values.</p>
+Creates a switch statement to compare a variable with different values. `case` initializes the switch statement, and `when` compares its values.
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
+```liquid
+{% raw %}
 {% assign handle = 'cake' %}
 {% case handle %}
   {% when 'cake' %}
@@ -17,82 +17,72 @@ title: Control flow
   {% else %}
      This is not a cake nor a cookie
 {% endcase %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```text
 This is a cake
-{% endraw %}{% endhighlight %}
-</div>
+```
 
 ## if
 
-<p>Executes a block of code only if a certain condition is met.</p>
+Executes a block of code only if a certain condition is met.
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
+```liquid
+{% raw %}
 {% if product.title == 'Awesome Shoes' %}
   These shoes are awesome!
 {% endif %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```text
 These shoes are awesome!
-{% endraw %}{% endhighlight %}
-</div>
+```
 
 ## elsif / else
 
-<p>Adds more conditions within an <code>if</code> or <code>unless</code> block.</p>
+Adds more conditions within an `if` or `unless` block.
 
+```liquid
+{% raw %}
+<!-- If customer.name = 'anonymous' -->
+{% if customer.name == 'kevin' %}
+  Hey Kevin!
+{% elsif customer.name == 'anonymous' %}
+  Hey Anonymous!
+{% else %}
+  Hi Stranger!
+{% endif %}
+{% endraw %}
+```
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
-  <!-- If customer.name = 'anonymous' -->
-  {% if customer.name == 'kevin' %}
-    Hey Kevin!
-  {% elsif customer.name == 'anonymous' %}
-    Hey Anonymous!
-  {% else %}
-    Hi Stranger!
-  {% endif %}
-{% endraw %}{% endhighlight %}
-</div>
-
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```text
 Hey Anonymous!
-{% endraw %}{% endhighlight %}
-</div>
+```
 
 ## unless
 
-<p>Similar to <code>if</code>, but executes a block of code only if a certain condition is <strong>not</strong> met.</p>
+Similar to `if`, but executes a block of code only if a certain condition is **not** met.
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
-  {% unless product.title == 'Awesome Shoes' %}
-    These shoes are not awesome.
-  {% endunless %}
-{% endraw %}{% endhighlight %}
-</div>
+```liquid
+{% raw %}
+{% unless product.title == 'Awesome Shoes' %}
+  These shoes are not awesome.
+{% endunless %}
+{% endraw %}
+```
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
+```text
 These shoes are not awesome.
-{% endraw %}{% endhighlight %}
-</div>
+```
 
 This would be the equivalent of doing the following:
 
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
-  {% if product.title != 'Awesome Shoes' %}
-    These shoes are not awesome.
-  {% endif %}
-{% endraw %}{% endhighlight %}
-</div>
+```liquid
+{% raw %}
+{% if product.title != 'Awesome Shoes' %}
+  These shoes are not awesome.
+{% endif %}
+{% endraw %}
+```

tags/iteration.md

@@ -4,116 +4,106 @@ title: Iteration
 
 Iteration Tags are used to run a block of code repeatedly.
 
-### for
+## for
 
 Repeatedly executes a block of code. For a full list of attributes available within a `for` loop, see [forloop (object)](/themes/liquid-documentation/objects/for-loops).
 
 `for` loops can output a maximum of 50 results per page. In cases where there are more than 50 results, use the [paginate](/themes/liquid-documentation/tags/theme-tags/#paginate) tag to split them across multiple pages.
 
-<div class="code-block code-block--input">
-{% highlight liquid %}{% raw %}
+```liquid
+{% raw %}
   {% for product in collection.products %}
     {{ product.title }}
   {% endfor %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight text %}
+```text
 hat shirt pants
-{% endhighlight %}
-</div>
+```
 
 ### break
 
 Causes the loop to stop iterating when it encounters the `break` tag.
 
-<div class="code-block code-block--input">
-{% highlight liquid %}{% raw %}
-  {% for i in (1..5) %}
-    {% if i == 4 %}
-      {% break %}
-    {% else %}
-      {{ i }}
-    {% endif %}
-  {% endfor %}
-{% endraw %}{% endhighlight %}
-</div>
+```liquid
+{% raw %}
+{% for i in (1..5) %}
+  {% if i == 4 %}
+    {% break %}
+  {% else %}
+    {{ i }}
+  {% endif %}
+{% endfor %}
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight text %}
+```text
 1 2 3
-{% endhighlight %}
-</div>
+```
 
 ### continue
 
 Causes the loop to skip the current iteration when it encounters the `continue` tag.
 
-<div class="code-block code-block--input">
-{% highlight liquid %}{% raw %}
-  {% for i in (1..5) %}
-    {% if i == 4 %}
-      {% continue %}
-    {% else %}
-      {{ i }}
-    {% endif %}
-  {% endfor %}
-{% endraw %}{% endhighlight %}
-</div>
+```liquid
+{% raw %}
+{% for i in (1..5) %}
+  {% if i == 4 %}
+    {% continue %}
+  {% else %}
+    {{ i }}
+  {% endif %}
+{% endfor %}
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight text %}
+```text
 1 2 3   5
-{% endhighlight %}
-</div>
+```
 
-<div class="sub-sub-section">
+### for parameters
 
-<h2 class="parameter">parameters <span>for</span></h2>
+#### limit
 
-<h4>limit</h4>
 Exits the for loop at a specific index.
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
-  <!-- if array = [1,2,3,4,5,6] -->
-  {% for item in array limit:2 %}
-    {{ item }}
-  {% endfor %}
-{% endraw %}{% endhighlight %}
-</div>
+```liquid
+{% raw %}
+<!-- if array = [1,2,3,4,5,6] -->
+{% for item in array limit:2 %}
+  {{ item }}
+{% endfor %}
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```text
 1 2
-{% endraw %}{% endhighlight %}
-</div>
+```
 
+#### offset
 
-<h4>offset</h4>
 Starts the for loop at a specific index.
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
-  <!-- if array = [1,2,3,4,5,6] -->
-  {% for item in array offset:2 %}
-    {{ item }}
-  {% endfor %}
-{% endraw %}{% endhighlight %}
-</div>
+```liquid
+{% raw %}
+<!-- if array = [1,2,3,4,5,6] -->
+{% for item in array offset:2 %}
+  {{ item }}
+{% endfor %}
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```text
 3 4 5 6
-{% endraw %}{% endhighlight %}
-</div>
+```
+
+#### range
 
-<h4>range</h4>
 Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
+```liquid
+{% raw %}
 {% assign num = 4 %}
 {% for i in (1..num) %}
   {{ i }}
@@ -122,290 +112,174 @@ Defines a range of numbers to loop through. The range can be defined by both lit
 {% for i in (3..5) %}
   {{ i }}
 {% endfor %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```text
 1 2 3 4
 3 4 5
-{% endraw %}{% endhighlight %}
-</div>
+```
+
+#### reversed
 
-<h4>reversed
-</h4>
 Reverses the order of the for loop.
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
+```liquid
+{% raw %}
 <!-- if array = [1,2,3,4,5,6] -->
 {% for item in array reversed %}
-	{{ item }}
+  {{ item }}
 {% endfor %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```text
 6 5 4 3 2 1
-{% endraw %}{% endhighlight %}
-</div>
-</div>
+```
 
-### cycle
+## cycle
 
-Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time <code>cycle</code> is called, the next string that was passed as a parameter is output.
+Loops through a group of strings and outputs them in the order that they were passed as parameters. Each time `cycle` is called, the next string that was passed as a parameter is output.
 
-<code>cycle</code> must be used within a <a href="#for">for</a> loop block.
+`cycle` must be used within a [for](#for) loop block.
 
-
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
+```liquid
+{% raw %}
 {% cycle 'one', 'two', 'three' %}
 {% cycle 'one', 'two', 'three' %}
 {% cycle 'one', 'two', 'three' %}
 {% cycle 'one', 'two', 'three' %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```text
 one
 two
 three
 one
-{% endraw %}{% endhighlight %}
-</div>
-
-Uses for <code>cycle</code> include:
-
-- applying odd/even classes to rows in a table
-- applying a unique class to the last product thumbnail in a row
-
-<div class="sub-sub-section">
-
-<h2 class="parameter">parameters <span>cycle</span></h2>
-
-<code>cycle</code> accepts a parameter called <strong>cycle group</strong> in cases where you need multiple <code>cycle</code> blocks in one template. If no name is supplied for the cycle group, then it is assumed that multiple calls with the same parameters are one group.
-
-<p>The example below shows why cycle groups are necessary when there are multiple instances of the cycle block.</p>
-
-<div>
-{% highlight html %}{% raw %}
-<ul>
-{% for product in collections.collection-1.products %}
-  <li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}>
-    <a href="{{ product.url | within: collection }}">
-      <img src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" />
-    </a>
-  </li>
-{% endfor %}
-</ul>
-<ul>
-{% for product in collections.collection-2.products %}
-  <li{% cycle ' style="clear:both;"', '', '', ' class="last"' %}>
-    <a href="{{ product.url | within: collection }}">
-      <img src="{{ product.featured_image.src | product_img_url: 'medium' }}" alt="{{ product.featured_image.alt }}" />
-    </a>
-  </li>
-{% endfor %}
-</ul>
-{% endraw %}{% endhighlight %}
-</div>
-
-<p>In the code above, if the first collection only has two products, the second collection loop will continue the <code>cycle</code> where the first one left off. This will result in this undesired output:</p>
-
-<div>
-{% highlight html %}{% raw %}
-<ul>
-  <li style="clear:both"></li>
-</ul>
-<ul>
-  <li></li>
-  <li class="last"></li>
-  <li style="clear:both"></li>
-  <li></li>
-</ul>
-{% endraw %}{% endhighlight %}
-</div>
-
-<p>To avoid this, cycle groups are used for each <code>cycle</code> block, as shown below.</p>
-
-<div>
-{% highlight html %}{% raw %}
-<ul>
-{% for product in collections.collection-1.products %}
-  <li{% cycle 'group1': ' style="clear:both;"', '', '', ' class="last"' %}>
-    <a href="{{ product.url | within: collection }}">
-      <img src="{{ product.featured_image.src | product_img_url: "medium" }}" alt="{{ product.featured_image.alt }}" />
-    </a>
-  </li>
-{% endfor %}
-</ul>
-<ul>
-{% for product in collections.collection-2.products %}
-  <li{% cycle 'group2': ' style="clear:both;"', '', '', ' class="last"' %}>
-    <a href="{{ product.url | within: collection }}">
-      <img src="{{ product.featured_image.src | product_img_url: "medium" }}" alt="{{ product.featured_image.alt }}" />
-    </a>
-  </li>
-{% endfor %}
-</ul>
-{% endraw %}{% endhighlight %}
-</div>
-
-<p>With the code above, the two <code>cycle</code> blocks are independent of each other. The result is shown below:</p>
-
-<div>
-{% highlight html %}{% raw %}
-<ul>
-  <li style="clear:both"></li>
-  <li></li>
-</ul>
-<!-- new cycle group starts! -->
-<ul>
-  <li style="clear:both"></li>
-  <li></li>
-  <li></li>
-  <li class="last"></li>
-</ul>
-{% endraw %}{% endhighlight %}
-</div>
-
-</div>
-
-
-
-
+```
 
+Uses for `cycle` include:
 
+-   applying odd/even classes to rows in a table
+-   applying a unique class to the last product thumbnail in a row
 
+### cycle parameters
 
+`cycle` accepts a parameter called `cycle group` in cases where you need multiple `cycle` blocks in one template. If no name is supplied for the cycle group, then it is assumed that multiple calls with the same parameters are one group.
 
 ### tablerow
 
-<p>Generates an HTML <code>&#60;table&#62;</code>. Must be wrapped in an opening &lt;table&gt; and closing &lt;/table&gt; HTML tags. For a full list of attributes available within a tablerow loop, see <a href="/themes/liquid-documentation/objects/tablerow">tablerow (object)</a>.</p>
+Generates an HTML table. Must be wrapped in opening `<table>` and closing `</table>` HTML tags.
 
-
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
+```liquid
+{% raw %}
 <table>
 {% tablerow product in collection.products %}
   {{ product.title }}
 {% endtablerow %}
 </table>
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```html
 <table>
-	<tr class="row1">
-		<td class="col1">
-			Cool Shirt
-		</td>
-		<td class="col2">
-			Alien Poster
-		</td>
-		<td class="col3">
-			Batman Poster
-		</td>
-		<td class="col4">
-			Bullseye Shirt
-		</td>
-		<td class="col5">
-			Another Classic Vinyl
-		</td>
-		<td class="col6">
-			Awesome Jeans
-		</td>
-	</tr>
+  <tr class="row1">
+    <td class="col1">
+      Cool Shirt
+    </td>
+    <td class="col2">
+      Alien Poster
+    </td>
+    <td class="col3">
+      Batman Poster
+    </td>
+    <td class="col4">
+      Bullseye Shirt
+    </td>
+    <td class="col5">
+      Another Classic Vinyl
+    </td>
+    <td class="col6">
+      Awesome Jeans
+    </td>
+  </tr>
 </table>
-{% endraw %}{% endhighlight %}
-</div>
+```
 
+### tablerow parameters
 
-<div class="sub-sub-section">
-
-<h2 class="parameter">parameters <span>tablerow</span></h2>
-
-<h4>cols</h4>
+#### cols
 
 Defines how many columns the tables should have.
 
-<div class="code-block code-block--input">
-{% highlight html %}{% raw %}
+```liquid
+{% raw %}
 {% tablerow product in collection.products cols:2 %}
   {{ product.title }}
 {% endtablerow %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-<div class="code-block code-block--output">
-{% highlight html %}{% raw %}
+```html
 <table>
-	<tr class="row1">
-		<td class="col1">
-			Cool Shirt
-		</td>
-		<td class="col2">
-			Alien Poster
-		</td>
-	</tr>
-	<tr class="row2">
-		<td class="col1">
-			Batman Poster
-		</td>
-		<td class="col2">
-			Bullseye Shirt
-	  	</td>
-	</tr>
-	<tr class="row3">
-		<td class="col1">
-  		    Another Classic Vinyl
-	  	</td>
-		<td class="col2">
-  		    Awesome Jeans
-	  	</td>
-	</tr>
+  <tr class="row1">
+    <td class="col1">
+      Cool Shirt
+    </td>
+    <td class="col2">
+      Alien Poster
+    </td>
+  </tr>
+  <tr class="row2">
+    <td class="col1">
+      Batman Poster
+    </td>
+    <td class="col2">
+      Bullseye Shirt
+      </td>
+  </tr>
+  <tr class="row3">
+    <td class="col1">
+          Another Classic Vinyl
+      </td>
+    <td class="col2">
+          Awesome Jeans
+      </td>
+  </tr>
 </table>
-{% endraw %}{% endhighlight %}
-</div>
+```
 
-<h4>limit</h4>
+#### limit
 
 Exits the tablerow after a specific index.
-<br/><br/>
-<div>
-{% highlight html %}{% raw %}
+
+```liquid
+{% raw %}
 {% tablerow product in collection.products cols:2 limit:3 %}
   {{ product.title }}
 {% endtablerow %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-
-<h4>offset</h4>
+#### offset
 
 Starts the tablerow after a specific index.
-<br/><br/>
-<div>
-{% highlight html %}{% raw %}
+
+```liquid
+{% raw %}
 {% tablerow product in collection.products cols:2 offset:3 %}
   {{ product.title }}
 {% endtablerow %}
-{% endraw %}{% endhighlight %}
-</div>
+{% endraw %}
+```
 
-
-<h4>range</h4>
+#### range
 
 Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
-<br/><br/>
 
-
-<div>
-{% highlight html %}{% raw %}
+```liquid
+{% raw %}
 <!--variable number example-->
 
 {% assign num = 4 %}
@@ -422,9 +296,5 @@ Defines a range of numbers to loop through. The range can be defined by both lit
   {{ i }}
 {% endtablerow %}
 </table>
-{% endraw %}{% endhighlight %}
-</div>
-
-</div>
-
-
+{% endraw %}
+```