Switch to kramdown/rouge and fix code blocks

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