Switch to kramdown/rouge and fix code blocks

Gemfile.lock

@@ -21,22 +21,22 @@ GEM
       multipart-post (>= 1.2, < 3)
     ffi (1.9.10)
     gemoji (2.1.0)
-    github-pages (64)
+    github-pages (68)
       RedCloth (= 4.2.9)
       github-pages-health-check (= 1.1.0)
       jekyll (= 3.0.3)
       jekyll-coffeescript (= 1.0.1)
       jekyll-feed (= 0.4.0)
       jekyll-gist (= 1.4.0)
-      jekyll-github-metadata (= 1.9.0)
-      jekyll-mentions (= 1.0.1)
+      jekyll-github-metadata (= 1.10.0)
+      jekyll-mentions (= 1.1.2)
       jekyll-paginate (= 1.1.0)
       jekyll-redirect-from (= 0.10.0)
       jekyll-sass-converter (= 1.3.0)
-      jekyll-seo-tag (= 1.3.2)
+      jekyll-seo-tag (= 1.3.3)
       jekyll-sitemap (= 0.10.0)
       jekyll-textile-converter (= 0.1.0)
-      jemoji (= 0.5.1)
+      jemoji (= 0.6.2)
       kramdown (= 1.10.0)
       liquid (= 3.0.6)
       mercenary (~> 0.3)
@@ -68,9 +68,9 @@ GEM
     jekyll-feed (0.4.0)
     jekyll-gist (1.4.0)
       octokit (~> 4.2)
-    jekyll-github-metadata (1.9.0)
+    jekyll-github-metadata (1.10.0)
       octokit (~> 4.0)
-    jekyll-mentions (1.0.1)
+    jekyll-mentions (1.1.2)
       html-pipeline (~> 2.3)
       jekyll (~> 3.0)
     jekyll-paginate (1.1.0)
@@ -78,17 +78,17 @@ GEM
       jekyll (>= 2.0)
     jekyll-sass-converter (1.3.0)
       sass (~> 3.2)
-    jekyll-seo-tag (1.3.2)
+    jekyll-seo-tag (1.3.3)
       jekyll (~> 3.0)
     jekyll-sitemap (0.10.0)
     jekyll-textile-converter (0.1.0)
       RedCloth (~> 4.0)
     jekyll-watch (1.3.1)
       listen (~> 3.0)
-    jemoji (0.5.1)
+    jemoji (0.6.2)
       gemoji (~> 2.0)
       html-pipeline (~> 2.2)
-      jekyll (>= 2.0)
+      jekyll (>= 3.0)
     json (1.8.3)
     kramdown (1.10.0)
     liquid (3.0.6)
@@ -112,7 +112,7 @@ GEM
     redcarpet (3.3.3)
     rouge (1.10.1)
     safe_yaml (1.0.4)
-    sass (3.4.21)
+    sass (3.4.22)
     sawyer (0.7.0)
       addressable (>= 2.3.5, < 2.5)
       faraday (~> 0.8, < 0.10)

_config.yml

@@ -1,14 +1,11 @@
 title: Liquid Templating Engine
 description: "Liquid is a template language and accompanying rendering engine. It is built for security, so is perfect for rendering custom templates from your users."
+
 repository: https://github.com/Shopify/liquid
 
 # Build settings
 baseurl:                /liquid # the subpath of your site, e.g. /blog/
-url:                    https://shopify.github.io # the base hostname & protocol for your site
-markdown:               redcarpet
-redcarpet:
-  extensions:           ["with_toc_data", "tables", "disable_indented_code_blocks", "no_intra_emphasis"]
-highlighter:            pygments
+url:                    http://liquidmarkup.org # the base hostname & protocol for your site
 permalink:              pretty
 exclude:
   - README.md

_sass/modules/_content-area.scss

@@ -3,29 +3,20 @@
 }
 
 .highlight {
-
-  pre {
-    border-top: none;
-    border-radius: 0 0 3px 3px;
-  }
-
-  &:before {
-    content: "Example";
-    display: block;
-    padding: 8px 12px;
-    color: $color-slate;
-    background: #fff;
-    border: 1px solid $color-blue-2;
-    border-radius: 3px 3px 0 0;
-    font-size: 16px;
-    font-weight: bold;
-  }
-
-  // Label every second code block with "Output"
-  & + .highlight:nth-of-type(2n) {
-    &:before {
-      content: "Output";
-    }
-  }
-
+  background: lighten($color-blue-1, 1);
+}
+
+.code-label {
+  padding: 4px 12px;
+  margin-bottom: 0;
+  font-size: 15px;
+  background: darken($color-blue-1, 5);
+  border: 1px solid $color-blue-2;
+  border-bottom: none;
+  border-radius: 3px 3px 0 0;
+}
+
+.code-label + .highlighter-rouge .highlight {
+  border-top: none;
+  border-radius: 0 0 3px 3px;
 }

_sass/vendors/_syntax-highlighting.scss

@@ -2,7 +2,7 @@
  * Syntax highlighting styles
  */
 .highlight {
-    background: #fff;
+    // background: #fff;
     @extend %vertical-rhythm;
 
     .c     { color: #998; font-style: italic } // Comment

basics/introduction.md

@@ -9,12 +9,14 @@ Liquid code can be categorized into [**objects**](#objects), [**tags**](#tags),
 **Objects** tell Liquid where to show content on a page. Objects and variable names are denoted by double curly braces: `{% raw %}{{{% endraw %}` and `{% raw %}}}{% endraw %}`.
 
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ page.title }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 Introduction
 ```
@@ -27,15 +29,16 @@ In this case, Liquid is rendering the content of an object called `page.title`,
 
 The markup used in tags does not produce any visible text. This means that you can assign variables and create conditions and loops without showing any of the Liquid logic on the page.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% if user %}
   Hello {{ user.name }}!
 {% endif %}
-
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 Hello Adam!
 ```
@@ -53,12 +56,14 @@ You can read more about each type of tag in their respective sections.
 
 **Filters** change the output of a Liquid object. They are using within an output and are separated by a `|`.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "/my/fancy/url" | append: ".html" }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "/my/fancy/url" | append: ".html" }}
 ```

basics/truthy-and-falsy.md

@@ -26,6 +26,7 @@ In the example below, the string "Tobi" is not a boolean, but it is truthy in a
 
 [Strings]({{ "/basics/types/#string" | prepend: site.baseurl }}), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty:
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% if settings.fp_heading %}
@@ -34,6 +35,7 @@ In the example below, the string "Tobi" is not a boolean, but it is truthy in a
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```html
 <h1></h1>
 ```

basics/types.md

@@ -62,12 +62,14 @@ In the following example, if the user does not exist (that is, `user` returns `n
 
 Tags or outputs that return `nil` will not print anything to the page.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 The current user is {{ user.name }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 The current user is
 ```
@@ -80,6 +82,7 @@ Arrays hold lists of variables of any type.
 
 To access all the items in an array, you can loop through each item in the array using an [iteration tag]({{ "/tags/iteration" | prepend: site.baseurl }}).
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
@@ -89,6 +92,7 @@ To access all the items in an array, you can loop through each item in the array
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% raw %}
 Tobi Laura Tetsuro Adam
@@ -99,6 +103,7 @@ Tobi Laura Tetsuro Adam
 
 You can use square bracket `[` `]` notation to access a specific item in an array. Array indexing starts at zero.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- if site.users = "Tobi", "Laura", "Tetsuro", "Adam" -->
@@ -108,6 +113,7 @@ You can use square bracket `[` `]` notation to access a specific item in an arra
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 Tobi
 Laura

filters/append.md

@@ -4,18 +4,21 @@ title: append
 
 Concatenates two strings and returns the concatenated value.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "/my/fancy/url" | append: ".html" }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "/my/fancy/url" | append: ".html" }}
 ```
 
 `append` can also be used with variables:
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign filename = "/index.html" %}
@@ -23,6 +26,7 @@ Concatenates two strings and returns the concatenated value.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign filename = "/index.html" %}
 {{ "website.com" | append: filename }}

filters/capitalize.md

@@ -4,24 +4,28 @@ title: capitalize
 
 Makes the first character of a string capitalized.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "title" | capitalize }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 Title
 ```
 
 `capitalize` only capitalizes the first character of the string, so later words are not affected:
 
- ```liquid
+ <p class="code-label">Input</p>
+```liquid
 {% raw %}
 {{ "my great title" | capitalize }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 My great title
 ```

filters/ceil.md

@@ -4,44 +4,52 @@ title: ceil
 
 Rounds the input up to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 1.2 | ceil }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 1.2 | ceil }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 2.0 | ceil }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 2.0 | ceil }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | ceil }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | ceil }}
 ```
 
 Here the input value is a string:
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "3.5" | ceil }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "3.5" | ceil }}
 ```

filters/date.md

@@ -4,34 +4,40 @@ title: date
 
 Converts a timestamp into another date format. The format for this syntax is the same as [`strftime`](//strftime.net).
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ article.published_at | date: "%a, %b %d, %y" }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 Fri, Jul 17, 15
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ article.published_at | date: "%Y" }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 2015
 ```
 
 `date` works on strings if they contain well-formatted dates:
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "March 14, 2016" | date: "%b %d, %y" }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "March 14, 2016" | date: "%b %d, %y" }}
 ```

filters/default.md

@@ -6,18 +6,21 @@ Allows you to specify a fallback in case a value doesn't exist. `default` will s
 
 In this example, `product_price` is not defined, so the default value is used.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ product_price | default: 2.99 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 2.99
 ```
 
 In this example, `product_price` is defined, so the default value is not used.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign product_price = 4.99 %}
@@ -25,12 +28,14 @@ In this example, `product_price` is defined, so the default value is not used.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 4.99
 ```
 
 In this example, `product_price` is empty, so the default value is used.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign product_price = "" %}
@@ -38,7 +43,7 @@ In this example, `product_price` is empty, so the default value is used.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 2.99
 ```
-

filters/divided_by.md

@@ -6,32 +6,38 @@ Divides a number by the specified number.
 
 The result is rounded down to the nearest integer (that is, the [floor]({{ "/filters/floor" | prepend: site.baseurl }})).
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 4 | divided_by: 2 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 4 | divided_by: 2 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 16 | divided_by: 4 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 16 | divided_by: 4 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 5 | divided_by: 3 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 5 | divided_by: 3 }}
 ```

filters/downcase.md

@@ -4,22 +4,26 @@ title: downcase
 
 Makes each character in a string lowercase. It has no effect on strings which are already all lowercase.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Parker Moore" | downcase }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Parker Moore" | downcase }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "apple" | downcase }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "apple" | downcase }}
 ```

filters/escape.md

@@ -4,22 +4,26 @@ title: escape
 
 Escapes a string by replacing characters with escape sequences (so that the string can be used in a URL, for example). It doesn't change strings that don't have anything to escape.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Have you read 'James & the Giant Peach'?" | escape }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Have you read 'James & the Giant Peach'?" | escape }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Tetsuro Takara" | escape }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Tetsuro Takara" | escape }}
 ```

filters/escape_once.md

@@ -4,22 +4,26 @@ title: escape_once
 
 Escapes a string without changing existing escaped entities. It doesn't change strings that don't have anything to escape.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "1 < 2 & 3" | escape_once }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "1 < 2 & 3" | escape_once }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "1 &lt; 2 &amp; 3" | escape_once }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "1 &lt; 2 &amp; 3" | escape_once }}
 ```

filters/first.md

@@ -4,6 +4,7 @@ title: first
 
 Returns the first item of an array.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
@@ -12,12 +13,14 @@ Returns the first item of an array.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
 
 {{ my_array.first }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
@@ -26,6 +29,7 @@ Returns the first item of an array.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
 

filters/floor.md

@@ -4,44 +4,52 @@ title: floor
 
 Rounds a number down to the nearest whole number. Liquid tries to convert the input to a number before the filter is applied.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 1.2 | floor }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 1.2 | floor }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 2.0 | floor }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 2.0 | floor }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | floor }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | floor }}
 ```
 
 Here the input value is a string:
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "3.5" | floor }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "3.5" | floor }}
 ```

filters/join.md

@@ -4,6 +4,7 @@ title: join
 
 Combines the items in an array into a single string using the argument as a separator.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
@@ -12,6 +13,7 @@ Combines the items in an array into a single string using the argument as a sepa
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
 

filters/last.md

@@ -4,6 +4,7 @@ title: last
 
 Returns the last item of an array.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
@@ -12,12 +13,14 @@ Returns the last item of an array.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
 
 {{ my_array.last }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
@@ -26,6 +29,7 @@ Returns the last item of an array.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
 

filters/lstrip.md

@@ -4,12 +4,14 @@ title: lstrip
 
 Removes all whitespaces (tabs, spaces, and newlines) from the beginning of a string. The filter does not affect spaces between words.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "          So much room for activities!          " | lstrip }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "          So much room for activities!          " | lstrip }}
 ```

filters/map.md

@@ -6,6 +6,7 @@ Creates an array of values by extracting the values of a named property from ano
 
 In this example, assume the object `site.pages` contains all the metadata for a website. Using `assign` with the `map` filter creates a variable that contains only the values of the `category` properties of everything in the `site.pages` object.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign all_categories = site.pages | map: "category" %}
@@ -16,6 +17,7 @@ In this example, assume the object `site.pages` contains all the metadata for a
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 business
 celebrities

filters/minus.md

@@ -4,32 +4,38 @@ title: minus
 
 Subtracts a number from another number.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 4 | minus: 2 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 4 | minus: 2 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 16 | minus: 4 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 16 | minus: 4 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | minus: 12 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | minus: 12 }}
 ```

filters/modulo.md

@@ -4,32 +4,38 @@ title: modulo
 
 Returns the remainder of a division operation.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 3 | modulo: 2 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 3 | modulo: 2 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 24 | modulo: 7 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 24 | modulo: 7 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | modulo: 12 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | modulo: 12 }}
 ```

filters/newline_to_br.md

@@ -4,6 +4,7 @@ title: newline_to_br
 
 Replaces every newline (`\n`) with an HTML line break (`<br>`).
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% capture string_with_newlines %}
@@ -15,6 +16,7 @@ there
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```html
 {% capture string_with_newlines %}
 Hello

filters/plus.md

@@ -4,32 +4,38 @@ title: plus
 
 Adds a number to another number.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 4 | plus: 2 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 4 | plus: 2 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 16 | plus: 4 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 16 | plus: 4 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | plus: 12 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | plus: 12 }}
 ```

filters/prepend.md

@@ -4,18 +4,21 @@ title: prepend
 
 Adds the specified string to the beginning of another string.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
 ```
 
 You can also `prepend` variables:
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign url = "liquidmarkup.com" %}
@@ -24,6 +27,7 @@ You can also `prepend` variables:
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign url = "liquidmarkup.com" %}
 

filters/remove.md

@@ -4,12 +4,14 @@ title: remove
 
 Removes every occurrence of the specified substring from a string.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "I strained to see the train through the rain" | remove: "rain" }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "I strained to see the train through the rain" | remove: "rain" }}
 ```

filters/remove_first.md

@@ -4,12 +4,14 @@ title: remove_first
 
 Removes only the first occurrence of the specified substring from a string.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "I strained to see the train through the rain" | remove_first: "rain" }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "I strained to see the train through the rain" | remove_first: "rain" }}
 ```

filters/replace.md

@@ -4,12 +4,14 @@ title: replace
 
 Replaces every occurrence of an argument in a string with the second argument.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
 ```

filters/replace_first.md

@@ -4,6 +4,7 @@ title: replace_first
 
 Replaces only the first occurrence of the first argument in a string with the second argument.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_string = "Take my protein pills and put my helmet on" %}
@@ -11,6 +12,7 @@ Replaces only the first occurrence of the first argument in a string with the se
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign my_string = "Take my protein pills and put my helmet on" %}
 {{ my_string | replace_first: "my", "your" }}

filters/reverse.md

@@ -4,6 +4,7 @@ title: reverse
 
 Reverses the order of the items in an array. `reverse` cannot reverse a string.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
@@ -12,6 +13,7 @@ Reverses the order of the items in an array. `reverse` cannot reverse a string.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
 
@@ -20,12 +22,14 @@ Reverses the order of the items in an array. `reverse` cannot reverse a string.
 
 `reverse` cannot be used directly on a string, but you can split a string into an array, reverse the array, and rejoin it by chaining together filters:
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
 ```

filters/round.md

@@ -4,32 +4,38 @@ title: round
 
 Rounds an input number to the nearest integer or, if a number is specified as an argument, to that number of decimal places.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 1.2 | round }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 1.2 | round }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 2.7 | round }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 2.7 | round }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | round: 2 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | round: 2 }}
 ```

filters/rstrip.md

@@ -4,12 +4,14 @@ title: rstrip
 
 Removes all whitespace (tabs, spaces, and newlines) from the right side of a string.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "          So much room for activities!          " | rstrip }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "          So much room for activities!          " | rstrip }}
 ```

filters/size.md

@@ -4,16 +4,19 @@ title: size
 
 Returns the number of characters in a string or the number of items in an array. `size` can also be used with dot notation (for example, `{% raw %}{{ my_string.size }}{% endraw %}`). This allows you to use `size` inside  tags such as conditionals.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Ground control to Major Tom." | size }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Ground control to Major Tom." | size }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
@@ -22,6 +25,7 @@ Returns the number of characters in a string or the number of items in an array.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
 

filters/slice.md

@@ -6,44 +6,52 @@ Returns a substring of 1 character beginning at the index specified by the argum
 
 String indices are numbered starting from 0.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Liquid" | slice: 0 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Liquid" | slice: 0 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Liquid" | slice: 2 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Liquid" | slice: 2 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Liquid" | slice: 2, 5 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Liquid" | slice: 2, 5 }}
 ```
 
 If the first parameter is a negative number, the indices are counted from the end of the string:
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Liquid" | slice: -3, 2 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Liquid" | slice: -3, 2 }}
 ```

filters/sort.md

@@ -4,6 +4,7 @@ title: sort
 
 Sorts items in an array by a property of an item in the array. The order of the sorted array is case-sensitive.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
@@ -12,6 +13,7 @@ Sorts items in an array by a property of an item in the array. The order of the
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
 

filters/split.md

@@ -4,6 +4,7 @@ title: split
 
 Divides an input string into an array using the argument as a separator. `split` is commonly used to convert comma-separated items from a string to an array.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
@@ -14,6 +15,7 @@ Divides an input string into an array using the argument as a separator. `split`
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
 

filters/strip.md

@@ -4,12 +4,14 @@ title: strip
 
 Removes all whitespace (tabs, spaces, and newlines) from both the left and right side of a string. It does not affect spaces between words.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "          So much room for activities!          " | strip }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "          So much room for activities!          " | strip }}
 ```

filters/strip_html.md

@@ -4,12 +4,14 @@ title: strip_html
 
 Removes any HTML tags from a string.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Have <em>you</em> read <strong>Ulysses</strong>?" | strip_html }}
 ```

filters/strip_newlines.md

@@ -4,6 +4,7 @@ title: strip_newlines
 
 Removes any newline characters (line breaks) from a string.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% capture string_with_newlines %}
@@ -15,6 +16,7 @@ there
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```html
 {% capture string_with_newlines %}
 Hello
@@ -23,4 +25,3 @@ there
 
 {{ string_with_newlines | strip_newlines }}
 ```
-

filters/times.md

@@ -4,32 +4,38 @@ title: times
 
 Multiplies a number by another number.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 3 | times: 2 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 3 | times: 2 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 24 | times: 7 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 24 | times: 7 }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ 183.357 | times: 12 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ 183.357 | times: 12 }}
 ```

filters/truncate.md

@@ -4,12 +4,14 @@ title: truncate
 
 `truncate` shortens a string  down to the number of characters passed as a parameter. If the number of characters specified is less than the length of the string, an ellipsis (...) is appended to the string and is included in the character count.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Ground control to Major Tom." | truncate: 20 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Ground control to Major Tom." | truncate: 20 }}
 ```

filters/truncatewords.md

@@ -4,12 +4,14 @@ title: truncatewords
 
 Shortens a string down to the number of words passed as the argument. If the specified number of words is less than the number of words in the string, an ellipsis (...) is appended to the string.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Ground control to Major Tom." | truncatewords: 3 }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Ground control to Major Tom." | truncatewords: 3 }}
 ```

filters/uniq.md

@@ -4,6 +4,7 @@ title: uniq
 
 Removes any duplicate elements in an array.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}
@@ -12,6 +13,7 @@ Removes any duplicate elements in an array.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {% assign my_array = "ants, bugs, bees, bugs, ants" | split: ", " %}
 

filters/upcase.md

@@ -4,22 +4,26 @@ title: upcase
 
 Makes each character in a string uppercase. It has no effect on strings which are already all uppercase.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Parker Moore" | upcase }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Parker Moore" | upcase }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "APPLE" | upcase }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "APPLE" | upcase }}
 ```

filters/url_encode.md

@@ -4,22 +4,26 @@ title: url_encode
 
 Converts any URL-unsafe characters in a string into percent-encoded characters.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "john@liquid.com" | url_encode }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "john@liquid.com" | url_encode }}
 ```
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {{ "Tetsuro Takara" | url_encode }}
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 {{ "Tetsuro Takara" | url_encode }}
 ```

tags/control-flow.md

@@ -8,6 +8,7 @@ Control flow tags can change the information Liquid shows using programming logi
 
 Creates a switch statement to compare a variable with different values. `case` initializes the switch statement, and `when` compares its values.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign handle = 'cake' %}
@@ -22,6 +23,7 @@ Creates a switch statement to compare a variable with different values. `case` i
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 This is a cake
 ```
@@ -30,6 +32,7 @@ This is a cake
 
 Executes a block of code only if a certain condition is `true`.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% if product.title == 'Awesome Shoes' %}
@@ -38,6 +41,7 @@ Executes a block of code only if a certain condition is `true`.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 These shoes are awesome!
 ```
@@ -46,6 +50,7 @@ These shoes are awesome!
 
 The opposite of `if` – executes a block of code only if a certain condition is **not** met.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% unless product.title == 'Awesome Shoes' %}
@@ -54,6 +59,7 @@ The opposite of `if` – executes a block of code only if a certain condition is
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 These shoes are not awesome.
 ```
@@ -72,6 +78,7 @@ This would be the equivalent of doing the following:
 
 Adds more conditions within an `if` or `unless` block.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- If customer.name = 'anonymous' -->
@@ -85,6 +92,7 @@ Adds more conditions within an `if` or `unless` block.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 Hey Anonymous!
 ```

tags/iteration.md

@@ -8,6 +8,7 @@ Iteration tags run blocks of code repeatedly.
 
 Repeatedly executes a block of code. For a full list of attributes available within a `for` loop, see [forloop (object)](https://docs.shopify.com/themes/liquid/objects/for-loops).
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
   {% for product in collection.products %}
@@ -16,6 +17,7 @@ Repeatedly executes a block of code. For a full list of attributes available wit
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 hat shirt pants
 ```
@@ -24,6 +26,7 @@ hat shirt pants
 
 Causes the loop to stop iterating when it encounters the `break` tag.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% for i in (1..5) %}
@@ -36,6 +39,7 @@ Causes the loop to stop iterating when it encounters the `break` tag.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 1 2 3
 ```
@@ -44,6 +48,7 @@ Causes the loop to stop iterating when it encounters the `break` tag.
 
 Causes the loop to skip the current iteration when it encounters the `continue` tag.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% for i in (1..5) %}
@@ -56,6 +61,7 @@ Causes the loop to skip the current iteration when it encounters the `continue`
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 1 2 3   5
 ```
@@ -66,6 +72,7 @@ Causes the loop to skip the current iteration when it encounters the `continue`
 
 Limits the loop to the specified number of iterations.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- if array = [1,2,3,4,5,6] -->
@@ -75,6 +82,7 @@ Limits the loop to the specified number of iterations.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 1 2
 ```
@@ -83,6 +91,7 @@ Limits the loop to the specified number of iterations.
 
 Begins the loop at the specified index.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- if array = [1,2,3,4,5,6] -->
@@ -92,6 +101,7 @@ Begins the loop at the specified index.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 3 4 5 6
 ```
@@ -100,6 +110,7 @@ Begins the loop at the specified index.
 
 Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
 
+<p class="code-label">Input</p>
 ```liquid
 {% for i in (3..5) %}
   {{ i }}
@@ -113,6 +124,7 @@ Defines a range of numbers to loop through. The range can be defined by both lit
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 3 4 5
 1 2 3 4
@@ -122,6 +134,7 @@ Defines a range of numbers to loop through. The range can be defined by both lit
 
 Reverses the order of the loop.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <!-- if array = [1,2,3,4,5,6] -->
@@ -131,6 +144,7 @@ Reverses the order of the loop.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 6 5 4 3 2 1
 ```
@@ -141,6 +155,7 @@ Loops through a group of strings and outputs them in the order that they were pa
 
 `cycle` must be used within a [for](#for) loop block.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% cycle 'one', 'two', 'three' %}
@@ -150,6 +165,7 @@ Loops through a group of strings and outputs them in the order that they were pa
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 one
 two
@@ -170,6 +186,7 @@ Uses for `cycle` include:
 
 Generates an HTML table. Must be wrapped in opening `<table>` and closing `</table>` HTML tags.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 <table>
@@ -180,6 +197,7 @@ Generates an HTML table. Must be wrapped in opening `<table>` and closing `</tab
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```html
 <table>
   <tr class="row1">
@@ -211,6 +229,7 @@ Generates an HTML table. Must be wrapped in opening `<table>` and closing `</tab
 
 Defines how many columns the tables should have.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% tablerow product in collection.products cols:2 %}
@@ -219,6 +238,7 @@ Defines how many columns the tables should have.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```html
 <table>
   <tr class="row1">

tags/variable.md

@@ -8,6 +8,7 @@ Variable tags create new Liquid variables.
 
 Creates a new variable.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign my_variable = false %}
@@ -17,12 +18,14 @@ Creates a new variable.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
   This statement is valid.
 ```
 
 Wrap a variable in quotations `"` to save it as a string.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign foo = "bar" %}
@@ -30,6 +33,7 @@ Wrap a variable in quotations `"` to save it as a string.
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 bar
 ```
@@ -38,6 +42,7 @@ bar
 
 Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through `{% raw %}{% capture %}{% endraw %}` are strings.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% capture my_variable %}I am being captured.{% endcapture %}
@@ -45,6 +50,7 @@ Captures the string inside of the opening and closing tags and assigns it to a v
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 I am being captured.
 ```
@@ -53,6 +59,7 @@ I am being captured.
 
 Creates a new number variable, and increases its value by one every time it is called. The initial value is 0.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% increment my_counter %}
@@ -61,6 +68,7 @@ Creates a new number variable, and increases its value by one every time it is c
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 0
 1
@@ -71,6 +79,7 @@ Variables created through the `increment` tag are independent from variables cre
 
 In the example below, a variable named "var" is created through `assign`. The `increment` tag is then used several times on a variable with the same name. Note that the `increment` tag does not affect the value of "var" that was created through `assign`.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% assign var = 10 %}
@@ -81,6 +90,7 @@ In the example below, a variable named "var" is created through `assign`. The `i
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 0
 1
@@ -92,6 +102,7 @@ In the example below, a variable named "var" is created through `assign`. The `i
 
 Creates a new number variable, and decreases its value by one every time it is called. The initial value is -1.
 
+<p class="code-label">Input</p>
 ```liquid
 {% raw %}
 {% decrement variable %}
@@ -100,6 +111,7 @@ Creates a new number variable, and decreases its value by one every time it is c
 {% endraw %}
 ```
 
+<p class="code-label">Output</p>
 ```text
 -1
 -2