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" }}
 ```