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.