Simpler code snippets + magic CSS

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 %}
+```