New content for nearly all filters

_layouts/method.html

@@ -1,11 +0,0 @@
----
-layout: default
----
-
-{{ content }}
-
-{% for item in page.examples %}
-
-<code>{{ item }}</code>
-
-{% endfor %}

_sass/modules/_content-area.scss

@@ -21,7 +21,8 @@
     box-sizing: border-box;
   }
 
-  & + .highlight {
+  // Label every second code block with "Output"
+  & + .highlight:nth-of-type(2n) {
     &:before {
       content: "Output";
     }

filters/append.md

@@ -11,7 +11,7 @@ title: append
 ```
 
 ```text
-/my/fancy/url.html
+{{ "/my/fancy/url" | append: ".html" }}
 ```
 
 `append` can also be used with variables:
@@ -19,12 +19,11 @@ title: append
 ```liquid
 {% raw %}
 {% assign filename = "/index.html" %}
-{{ product.url | append: filename }}
+{{ "website.com" | append: filename }}
 {% endraw %}
 ```
 
-```liquid
+```text
-{% raw %}
+{% assign filename = "/index.html" %}
-{{ product.url }}/index.html
+{{ "website.com" | append: filename }}
-{% endraw %}
 ```

filters/ceil.md

@@ -1,17 +1,35 @@
 ---
 title: ceil
-layout: method
-examples:
-  - 1.2
 ---
 
-`ceil` rounds the input up to the nearest whole number.
+`ceil` rounds the input up to the nearest whole number. The filter will attempt to cast any input to a number before it is applied.
 
-| Input                                      | Output |
+```liquid
-|:-------------------------------------------|:-------|
+{% raw %}
-| {% raw %}`{{ 1.2 | ceil }}`   {% endraw %} | 2      |
+{{ 1.2 | ceil }}
-| {% raw %}`{{ 1.7 | ceil }}`   {% endraw %} | 2      |
+{% endraw %}
-| {% raw %}`{{ 2.0 | ceil }}`   {% endraw %} | 2      |
+```
-| {% raw %}`{{ "18.3" | ceil }}`{% endraw %} | 19     |
 
-It will attempt to cast any input to a number.
+```text
+2
+```
+
+```liquid
+{% raw %}
+{{ 2.0 | ceil }}
+{% endraw %}
+```
+
+```text
+2
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | ceil }}
+{% endraw %}
+```
+
+```text
+184
+```

filters/date.md

@@ -2,11 +2,24 @@
 title: date
 ---
 
-`date` converts a timestamp into another date format.
+`date` converts a timestamp into another date format. The format for this syntax is the same as [`strftime`](//strftime.net).
 
-| Input                                                                     | Output               |
+```liquid
-|:--------------------------------------------------------------------------|:---------------------|
+{% raw %}
-| {% raw %}`{{ article.published_at | date: "%a, %b %d, %y" }}`{% endraw %} | Tue, Apr 22, 14      |
+{{ article.published_at | date: "%a, %b %d, %y" }}
-| {% raw %}`{{ article.published_at | date: "%Y" }}`{% endraw %}            | 2014                 |
+{% endraw %}
+```
 
-The format for this syntax is the same as [`strftime`](http://strftime.net/).
+```text
+Fri, Jul 17, 15
+```
+
+```liquid
+{% raw %}
+{{ article.published_at | date: "%Y" }}
+{% endraw %}
+```
+
+```text
+2015
+```

filters/divided_by.md

@@ -2,11 +2,36 @@
 title: divided_by
 ---
 
-This filter divides its input by its argument.
+`divided_by` divides its input (left side) by its argument (right side). It uses `to_number`, which converts to a decimal value unless already a numeric.
 
-| Code                                              | Output |
+The result is rounded down to the nearest integer (that is, the [floor](/filters/floor)).
-|:--------------------------------------------------|:-------|
-| {% raw %}`{{ 4 | divided_by: 2 }}`   {% endraw %} | 2      |
-| {% raw %}`{{ "16" | divided_by: 4 }}`{% endraw %} | 4      |
 
-It uses `to_number`, which converts to a decimal value unless already a numeric.
+```liquid
+{% raw %}
+{{ 4 | divided_by: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 4 | divided_by: 2 }}
+```
+
+```liquid
+{% raw %}
+{{ 16 | divided_by: 4 }}
+{% endraw %}
+```
+
+```text
+{{ 16 | divided_by: 4 }}
+```
+
+```liquid
+{% raw %}
+{{ 5 | divided_by: 3 }}
+{% endraw %}
+```
+
+```text
+{{ 5 | divided_by: 3 }}
+```

filters/downcase.md

@@ -2,10 +2,24 @@
 title: downcase
 ---
 
-`downcase` makes each character in a string lowercase.
+`downcase` makes each character in a string lowercase. It has no effect on strings which are already all lowercase.
 
-| Code                                                   | Output           |
+```liquid
-|:-------------------------------------------------------|:-----------------|
+{% raw %}
-| {% raw %}`{{ "Peter Parker" | downcase }}`{% endraw %} | `"peter parker"` |
+{{ "Parker Moore" | downcase }}
+{% endraw %}
+```
 
-It doesn't modify strings which are already entirely lowercase.
+```text
+{{ "Parker Moore" | downcase }}
+```
+
+```liquid
+{% raw %}
+{{ "apple" | downcase }}
+{% endraw %}
+```
+
+```text
+{{ "apple" | downcase }}
+```

filters/escape.md

@@ -2,11 +2,24 @@
 title: escape
 ---
 
-Escapes a string by replacing characters with escape sequences (so that the string can be used in a URI).
+Escapes a string by replacing some characters with escape sequences (so that the string can be used in a URL, for example). It doesn't change strings that have nothing to escape.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ "Need tips? Ask a friend!" | escape }}`{% endraw %}     | `"Need%20tips%3F%Ask%20a%20friend%21"` |
+{{ "Have you read 'James & the Giant Peach'?" | escape }}
-| {% raw %}`{{ "Nope" | escape }}`{% endraw %}           | `"Nope"` |
+{% endraw %}
+```
 
-It doesn't modify strings that have nothing to escape.
+```text
+{{ "Have you read 'James & the Giant Peach'?" | escape }}
+```
+
+```liquid
+{% raw %}
+{{ "Tetsuro Takara" | escape }}
+{% endraw %}
+```
+
+```text
+{{ "Tetsuro Takara" | escape }}
+```

filters/escape_once.md

@@ -2,12 +2,24 @@
 title: escape_once
 ---
 
-Escapes a string without affecting existing escaped entities.
+Escapes a string without changing existing escaped entities. It doesn't change strings that have nothing to escape.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ "1 < 2 & 3" | escape_once }}`{% endraw %}     | `"1 < 2 & 3"` |
+{{ "1 < 2 & 3" | escape_once }}
-| {% raw %}`{{ "<< Accept & Checkout" | escape_once }}`{% endraw %}     | `"<< Accept & Checkout"` |
+{% endraw %}
-| {% raw %}`{{ "Nope" | escape_once }}`{% endraw %}           | `"Nope"` |
+```
 
-It doesn't modify strings that have nothing to escape.
+```text
+{{ "1 < 2 & 3" | escape_once }}
+```
+
+```liquid
+{% raw %}
+{{ "1 &lt; 2 &amp; 3" | escape_once }}
+{% endraw %}
+```
+
+```text
+{{ "1 &lt; 2 &amp; 3" | escape_once }}
+```

filters/first.md

@@ -2,9 +2,32 @@
 title: first
 ---
 
-Returns the first element of an array. For example, if you have an array called `product.tags` that resolves to: `["sale", "mens", "womens", "awesome"]`:
+`first` returns the first element of an array without sorting the array.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ product.tags | first }}`{% endraw %}     | `"sale"` |
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
 
+{{ my_array.first }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array.first }}
+```
+
+```liquid
+{% raw %}
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.first }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.first }}
+```

filters/floor.md

@@ -4,11 +4,32 @@ title: floor
 
 `floor` rounds the input down to the nearest whole number.
 
-| Input                                      | Output |
+```liquid
-|:-------------------------------------------|:-------|
+{% raw %}
-| {% raw %}`{{ 1.2 | floor }}`   {% endraw %} | 1      |
+{{ 1.2 | floor }}
-| {% raw %}`{{ 1.7 | floor }}`   {% endraw %} | 1      |
+{% endraw %}
-| {% raw %}`{{ 2.0 | floor }}`   {% endraw %} | 2      |
+```
-| {% raw %}`{{ "18.3" | floor }}`{% endraw %} | 18     |
 
-It will attempt to cast any input to a number.
+```text
+{{ 1.2 | floor }}
+```
+
+```liquid
+{% raw %}
+{{ 2.0 | floor }}
+{% endraw %}
+```
+
+```text
+{{ 2.0 | floor }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | floor }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | floor }}
+```

filters/join.md

@@ -2,10 +2,18 @@
 title: join
 ---
 
-`join` joins the elements of an array, using the character you provide.
+`join` combines the elements of an array into a single string using the string you provide as a separator.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ product.tags | join: ', ' }}`{% endraw %}     | `"sale, mens, womens, awesome` |
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
 
-In the sample above, assume that `product.tags` resolves to: `["sale", "mens", "womens", "awesome"]`.
+{{ beatles | join: " and " }}
+{% endraw %}
+```
+
+```text
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
+
+{{ beatles | join: " and " }}
+```

filters/last.md

@@ -2,10 +2,32 @@
 title: last
 ---
 
-Return the last element of an array.
+`last` returns the last element of an array without sorting the array.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ product.tags | last }}`{% endraw %}     | `"awesome"` |
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
 
-In the sample above, assume that `product.tags` resolves to: `["sale", "mens", "womens", "awesome"]`.
+{{ my_array.last }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array.last }}
+```
+
+```liquid
+{% raw %}
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.last }}
+{% endraw %}
+```
+
+```text
+{% assign my_array = "zebra, octopus, giraffe, tiger" | split: ", " %}
+
+{{ my_array.last }}
+```

filters/lstrip.md

@@ -2,8 +2,14 @@
 title: lstrip
 ---
 
-Strips all whitespace (tabs, spaces, and newlines) from the left side of a string.
+`lstrip` removes all whitespace (tabs, spaces, and newlines) from the left side of a string.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ '   too many spaces   ' | lstrip }}`{% endraw %}     | `"too many spaces   "` |
+{{ "          So much room for activities!          " | lstrip }}
+{% endraw %}
+```
+
+```text
+{{ "          So much room for activities!          " | lstrip }}
+```

filters/minus.md

@@ -2,8 +2,34 @@
 title: minus
 ---
 
-Subtracts two numbers.
+`minus` subtracts the number passed in from the input number.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ 100 | minus: 10 }}`{% endraw %}     | `90` |
+{{ 4 | minus: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 4 | minus: 2 }}
+```
+
+```liquid
+{% raw %}
+{{ 16 | minus: 4 }}
+{% endraw %}
+```
+
+```text
+{{ 16 | minus: 4 }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | minus: 12 }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | minus: 12 }}
+```

filters/modulo.md

@@ -2,8 +2,34 @@
 title: modulo
 ---
 
-Performs a modulo operation, i.e. returns the remainder.
+`modulo` returns the remainder when the input is divided by the passed-in parameter.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ 3 | modulo: 2 }}`{% endraw %}     | `1` |
+{{ 3 | modulo: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 3 | modulo: 2 }}
+```
+
+```liquid
+{% raw %}
+{{ 24 | modulo: 7 }}
+{% endraw %}
+```
+
+```text
+{{ 24 | modulo: 7 }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | modulo: 12 }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | modulo: 12 }}
+```

filters/newline_to_br.md

@@ -2,8 +2,24 @@
 title: newline_to_br
 ---
 
-Replace every newline (`n`) with an HTML break (`<br>`).
+Replace every newline (`\n`) with an HTML line break (`<br>`).
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ "hello\nthere" | newline_to_br }}`{% endraw %}     | `hello<br/>there` |
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | newline_to_br }}
+{% endraw %}
+```
+
+```html
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | newline_to_br }}
+```

filters/plus.md

@@ -2,8 +2,34 @@
 title: plus
 ---
 
-Adds two numbers.
+`plus` adds the number passed in to the input number.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ 100 | plus: 10 }}`{% endraw %}     | `110` |
+{{ 4 | plus: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 4 | plus: 2 }}
+```
+
+```liquid
+{% raw %}
+{{ 16 | plus: 4 }}
+{% endraw %}
+```
+
+```text
+{{ 16 | plus: 4 }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | plus: 12 }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | plus: 12 }}
+```

filters/prepend.md

@@ -2,8 +2,30 @@
 title: prepend
 ---
 
-Prepends a string onto another.
+`prepend` adds a string to the beginning of the input string.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ 'world' | prepend: 'hello ' }}`{% endraw %}     | `hello world` |
+{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
+{% endraw %}
+```
+
+```text
+{{ "apples, oranges, and bananas" | prepend: "Some fruit: " }}
+```
+
+You can also `prepend` variables:
+
+```liquid
+{% raw %}
+{% assign url = "liquidmarkup.com" %}
+
+{{ "/index.html" | prepend: url }}
+{% endraw %}
+```
+
+```text
+{% assign url = "liquidmarkup.com" %}
+
+{{ "/index.html" | prepend: url }}
+```

filters/remove.md

@@ -2,8 +2,14 @@
 title: remove
 ---
 
-Removes every occurrence of a given string.
+`remove` removes every occurrence of of the passed-in substring from the input string.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ 'hello, hello world' | remove: 'hello' }}`{% endraw %}     | `,  world` |
+{{ "I strained to see the train through the rain" | remove: "rain" }}
+{% endraw %}
+```
+
+```text
+{{ "I strained to see the train through the rain" | remove: "rain" }}
+```

filters/remove_first.md

@@ -2,8 +2,14 @@
 title: remove_first
 ---
 
-Removes the first occurrence of a given string.
+`remove` removes the first occurrence of of the passed-in substring from the input string.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ 'hello, hello world' | remove_first: 'hello' }}`{% endraw %}     | `, hello world` |
+{{ "I strained to see the train through the rain" | remove_first: "rain" }}
+{% endraw %}
+```
+
+```text
+{{ "I strained to see the train through the rain" | remove_first: "rain" }}
+```

filters/replace.md

@@ -2,8 +2,14 @@
 title: replace
 ---
 
-Replaces every occurrence of a given string.
+`replace` replaces every occurrence of the first passed-in string in the input string with the second passed-in string.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ 'hello, hello world' | replace: 'hello', 'goodbye' }}`{% endraw %}     | `goodbye, goodbye world` |
+{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
+{% endraw %}
+```
+
+```text
+{{ "Take my protein pills and put my helmet on" | replace: "my", "your" }}
+```

filters/replace_first.md

@@ -2,8 +2,14 @@
 title: replace_first
 ---
 
-Replaces the first occurrence of a given string.
+`replace_first` replaces the first occurrence of the first passed-in string in the input string with the second passed-in string.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ 'hello, hello world' | replace_first: 'hello', 'goodbye' }}`{% endraw %}     | `goodbye, hello world` |
+{{ "Take my protein pills and put my helmet on" | replace_first: "my", "your" }}
+{% endraw %}
+```
+
+```text
+{{ "Take my protein pills and put my helmet on" | replace_first: "my", "your" }}
+```

filters/reverse.md

@@ -2,14 +2,30 @@
 title: reverse
 ---
 
-Reverses the order of an array.
+`reverse` reverses the order of the items in an array. `reverse` cannot reverse a string.
 
-{% highlight liquid %}
+```liquid
 {% raw %}
-{{ product.tags }}
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
-// ['cool', 'sale', 'purple', 'awesome']
 
-{{ product.tags | reverse }}
+{{ my_array | reverse | join: ", " }}
-// ['awesome', 'purple', 'sale', 'cool']
 {% endraw %}
-{% endhighlight %}
+```
+
+```text
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
+
+{{ my_array | reverse | join: ", " }}
+```
+
+`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:
+
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
+{% endraw %}
+```
+
+```text
+{{ "Ground control to Major Tom." | split: "" | reverse | join: "" }}
+```

filters/round.md

@@ -2,11 +2,34 @@
 title: round
 ---
 
-Rounds the output to the nearest integer or specified number of decimals.
+`round` rounds an input number to the nearest integer or, if a number is specified as a parameter, to that number of decimal places.
 
-| Input                                      | Output |
+```liquid
-|:-------------------------------------------|:-------|
+{% raw %}
-| {% raw %}`{{ 4.6 | round }}`   {% endraw %} | 5      |
+{{ 1.2 | round }}
-| {% raw %}`{{ 4.3 | round }}`   {% endraw %} | 4      |
+{% endraw %}
-| {% raw %}`{{ 4.5612 | round: 2 }}`   {% endraw %} | 4.56      |
+```
 
+```text
+{{ 1.2 | round }}
+```
+
+```liquid
+{% raw %}
+{{ 2.7 | round }}
+{% endraw %}
+```
+
+```text
+{{ 2.7 | round }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | round: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | round: 2 }}
+```

filters/rstrip.md

@@ -2,8 +2,14 @@
 title: rstrip
 ---
 
-Strips all whitespace (tabs, spaces, and newlines) from the right side of a string.
+`rstrip` removes all whitespace (tabs, spaces, and newlines) from the right side of a string.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ '   too many spaces   ' | rstrip }}`{% endraw %}     | `"too many spaces   "` |
+{{ "          So much room for activities!          " | rstrip }}
+{% endraw %}
+```
+
+```text
+{{ "          So much room for activities!          " | rstrip }}
+```

filters/size.md

@@ -2,20 +2,38 @@
 title: size
 ---
 
-<p>Returns the size of a string or an array.</p>
+`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 other tags like conditionals.
 
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | size }}
+{% endraw %}
+```
 
-| Code                                                   | Output             |
+```text
-|:-------------------------------------------------------|:-------------------|
+{{ "Ground control to Major Tom." | size }}
-| {% raw %}`{{ 'is this a 30 character string?' | size }}`{% endraw %}     | `30` |
+```
 
+```liquid
+{% raw %}
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
 
-`size` can be used in dot notation, in cases where it needs to be used inside a tag.
+{{ my_array | size }}
+{% endraw %}
+```
 
-<div>
+```text
-{% highlight html %}{% raw %}
+{% assign my_array = "apples, oranges, peaches, plums" | split: ", " %}
-{% if collections.frontpage.products.size > 10 %}
+
-  There are more than 10 products in this collection!
+{{ my_array | size }}
+```
+
+Using dot notation:
+
+```liquid
+{% raw %}
+{% if site.pages.size > 10 %}
+  This is a big website!
 {% endif %}
-{% endraw %}{% endhighlight %}
+{% endraw %}
-</div>
+```

filters/slice.md

@@ -2,19 +2,48 @@
 title: slice
 ---
 
-The <code>slice</code> filter returns a substring, starting at the specified index. An optional second parameter can be passed to specify the length of the substring. If no second parameter is given, a substring of one character will be returned.
+`slice` returns a substring of 1 character beginning at the index specified by the parameter passed in. An optional second parameter specifies the length of the substring to be returned.
 
+String indices are numbered starting from 0.
 
-| Input                                           | Output |
+```liquid
-|:------------------------------------------------|:-------|
+{% raw %}
-| {% raw %}`{{ "hello" | slice: 0 }}`{% endraw %} | h      |
+{{ "Liquid" | slice: 0 }}
-| {% raw %}`{{ "hello" | slice: 1 }}`{% endraw %} | e      |
+{% endraw %}
-| {% raw %}`{{ "hello" | slice: 1, 3 }}`{% endraw %} | ell |
+```
 
+```text
+{{ "Liquid" | slice: 0 }}
+```
 
-If the passed index is negative, it is counted from the end of the string.
+```liquid
+{% raw %}
+{{ "Liquid" | slice: 2 }}
+{% endraw %}
+```
 
-| Input                                           | Output |
+```text
-|:------------------------------------------------|:-------|
+{{ "Liquid" | slice: 2 }}
-| {% raw %}`{{ "hello" | slice: -3, 2  }}`{% endraw %} | ll |
+```
 
+```liquid
+{% raw %}
+{{ "Liquid" | slice: 2, 5 }}
+{% endraw %}
+```
+
+```text
+{{ "Liquid" | slice: 2, 5 }}
+```
+
+If the first parameter is a negative number, the indices are counted from the end of the string:
+
+```liquid
+{% raw %}
+{{ "Liquid" | slice: -3, 2 }}
+{% endraw %}
+```
+
+```text
+{{ "Liquid" | slice: -3, 2 }}
+```

filters/sort.md

@@ -4,20 +4,16 @@ 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="input">Input</p>
+```liquid
-<div>
+{% raw %}
-{% highlight html %}{% raw %}
+{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
-<!-- products = "a", "b", "A", "B" -->
-{% assign products = collection.products | sort: 'title' %}
-{% for product in products %}
-   {{ product.title }}
-{% endfor %}{% endraw %}{% endhighlight %}
-</div>
 
-<p class="output">Output</p>
+{{ my_array | sort | join: ", " }}
-<div>
+{% endraw %}
-{% highlight html %}{% raw %}
+```
-A B a b
-{% endraw %}{% endhighlight %}
-</div>
 
+```text
+{% assign my_array = "zebra, octopus, giraffe, Sally Snake" | split: ", " %}
+
+{{ my_array | sort | join: ", " }}
+```

filters/split.md

@@ -2,22 +2,22 @@
 title: split
 ---
 
-The `split` filter takes on a substring as a parameter. The substring is used as a delimiter to divide a string into an array. You can output different parts of an array using [array filters](/themes/liquid-documentation/filters/array-filters).
+`split` divides an input string into an array using the passed-in substring as a separator. `split` is commonly used to convert comma-separated items from a string to an array.
 
-<p class="input">Input</p>
+```liquid
-{% highlight liquid %}{% raw %}
+{% raw %}
-{% assign words = "Hi, how are you today?" | split: ' ' %}
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
 
-{% for word in words %}
+{% for member in beatles %}
-{{ word }}
+  {{ member }}
 {% endfor %}
-{% endraw %}{% endhighlight %}
+{% endraw %}
+```
 
-<p class="output">Output</p>
+```text
-{% highlight text %}
+{% assign beatles = "John, Paul, George, Ringo" | split: ", " %}
-Hi,
+
-how
+{% for member in beatles %}
-are
+  {{ member }}
-you
+{% endfor %}
-today?
+```
-{% endhighlight %}

filters/strip.md

@@ -2,8 +2,14 @@
 title: strip
 ---
 
-Strips all whitespace (tabs, spaces, and newlines) from a string.
+`strip` removes all whitespace (tabs, spaces, and newlines) from both the left and right sides of a string. It does not affect spaces between words.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ '   too many spaces   ' | strip }}`{% endraw %}     | `"too many spaces"` |
+{{ "          So much room for activities!          " | strip }}
+{% endraw %}
+```
+
+```text
+{{ "          So much room for activities!          " | strip }}
+```

filters/strip_html.md

@@ -2,10 +2,15 @@
 title: strip_html
 ---
 
-<p>Strips all HTML tags from a string.</p>
+`strip_html` removes any HTML tags from a string.
 
-<p class="input">Input</p>
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ "<h1>Hello</h1> World" | strip_html }}`{% endraw %}     | `Hello World` |
+{{ "Have <em>you</em> read <strong>James & the Giant Peach</strong>?" | strip_html }}
+{% endraw %}
+```
+
+```text
+{{ "Have <em>you</em> read <strong>James & the Giant Peach</strong>?" | strip_html }}
+```

filters/strip_newlines.md

@@ -2,4 +2,25 @@
 title: strip_newlines
 ---
 
-Removes any line breaks/newlines from a string.
+`strip_newlines` removes any newline characters (line breaks) from a string.
+
+```liquid
+{% raw %}
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | strip_newlines }}
+{% endraw %}
+```
+
+```html
+{% capture string_with_newlines %}
+Hello
+there
+{% endcapture %}
+
+{{ string_with_newlines | strip_newlines }}
+```
+

filters/times.md

@@ -2,8 +2,34 @@
 title: times
 ---
 
-Multiplies two numbers.
+`times` multiplies its input by its argument.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ 200 | times: 2 }}`{% endraw %}     | `400` |
+{{ 3 | times: 2 }}
+{% endraw %}
+```
+
+```text
+{{ 3 | times: 2 }}
+```
+
+```liquid
+{% raw %}
+{{ 24 | times: 7 }}
+{% endraw %}
+```
+
+```text
+{{ 24 | times: 7 }}
+```
+
+```liquid
+{% raw %}
+{{ 183.357 | times: 12 }}
+{% endraw %}
+```
+
+```text
+{{ 183.357 | times: 12 }}
+```

filters/truncate.md

@@ -2,9 +2,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>Truncates a string down to 'x' characters, where x is the number passed as a parameter. An ellipsis (...) is appended to the string and is included in the character count.</p>
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | truncate: 20 }}
+{% endraw %}
+```
 
-| Input                                      | Output |
+```text
-|:-------------------------------------------|:-------|
+{{ "Ground control to Major Tom." | truncate: 20 }}
-| {% raw %}`{{ "The cat came back the very next day" | truncate: 10 }}`{% endraw %} | "The cat..."      |
+```

filters/truncatewords.md

@@ -2,9 +2,14 @@
 title: truncatewords
 ---
 
+`truncate` shortens a string down to the number of words passed as a parameter. If the number of words specified is less than the number of words in the string, an ellipsis (...) is appended to the string.
 
-<p>Truncates a string down to 'x' words, where x is the number passed as a parameter. An ellipsis (...) is appended to the truncated string.</p>
+```liquid
+{% raw %}
+{{ "Ground control to Major Tom." | truncatewords: 3 }}
+{% endraw %}
+```
 
-| Input                                      | Output |
+```text
-|:-------------------------------------------|:-------|
+{{ "Ground control to Major Tom." | truncatewords: 3 }}
-| {% raw %}`{{ "The cat came back the very next day" | truncatewords: 4 }}`{% endraw %} | The cat came back...|
+```

filters/uniq.md

@@ -2,18 +2,18 @@
 title: uniq
 ---
 
+`uniq` removes any duplicate elements in an array.
 
-<p>Removes any duplicate instances of an element in an array.</p>
+```liquid
+{% raw %}
+{% assign my_array = "apples, oranges, bananas, oranges, apples" | split: ", " %}
 
-<p class="input">Input</p>
+{{ my_array | uniq | join: ", " }}
-<div>{% highlight html %}{% raw %}
+{% endraw %}
-{% assign fruits = "orange apple banana apple orange" %}
+```
-{{ fruits | split: ' ' | uniq | join: ' ' }}
-{% endraw %}{% endhighlight %}</div>
-
-<p class="output">Output</p>
-<div>{% highlight html%}{% raw %}
-orange apple banana
-{% endraw %}{% endhighlight %}</div>
 
+```text
+{% assign my_array = "apples, oranges, bananas, oranges, apples" | split: ", " %}
 
+{{ my_array | uniq | join: ", " }}
+```

filters/upcase.md

@@ -2,10 +2,24 @@
 title: upcase
 ---
 
-<p>Converts a string into uppercase.</p>
+`upcase` makes each character in a string uppercase. It has no effect on strings which are already all uppercase.
 
+```liquid
+{% raw %}
+{{ "Parker Moore" | upcase }}
+{% endraw %}
+```
 
-| Input                                      | Output |
+```text
-|:-------------------------------------------|:-------|
+{{ "Parker Moore" | upcase }}
-| {% raw %}`{{ 'loud noises' | upcase }}`{% endraw %} | LOUD NOISES      |
+```
 
+```liquid
+{% raw %}
+{{ "APPLE" | upcase }}
+{% endraw %}
+```
+
+```text
+{{ "APPLE" | upcase }}
+```

filters/url_encode.md

@@ -2,8 +2,24 @@
 title: url_encode
 ---
 
-Converts any URL-unsafe characters in a string into percent-encoded characters.
+`url_encode` converts any URL-unsafe characters in a string into percent-encoded characters.
 
-| Code                                                   | Output             |
+```liquid
-|:-------------------------------------------------------|:-------------------|
+{% raw %}
-| {% raw %}`{{ '[email protected]' | url_encode }}`{% endraw %}     | `john%40liquid.com` |
+{{ "john@liquid.com" | url_encode }}
+{% endraw %}
+```
+
+```text
+{{ "john@liquid.com" | url_encode }}
+```
+
+```liquid
+{% raw %}
+{{ "Tetsuro Takara" | url_encode }}
+{% endraw %}
+```
+
+```text
+{{ "Tetsuro Takara" | url_encode }}
+```

tags/variable.md

@@ -2,126 +2,108 @@
 title: Variable
 ---
 
-Variable Tags are used to create new Liquid variables. 
+Variable tags create new Liquid variables.
 
 ## assign
 
-<p>Creates a new variable.</p>      
+Creates a new variable.
 
-<div class="code-block code-block--input">
+```liquid
-{% highlight html %}{% raw %}
+{% raw %}
   {% assign my_variable = false %}
   {% if my_variable != true %}
   This statement is valid.
   {% endif %}
-{% endraw %}{% endhighlight %}
+{% endraw %}
-</div>
+```
 
-<div class="code-block code-block--output">
+```text
-{% highlight html %}{% raw %}
 	This statement is valid.
-{% endraw %}{% endhighlight %}
+```
-</div>
 
 Use quotations ("") to save the variable as a string.
 
-<div class="code-block code-block--input">
+```liquid
-{% highlight html %}{% raw %}
+{% raw %}
 {% assign foo = "bar" %}
 {{ foo }}
-{% endraw %}{% endhighlight %}
+{% endraw %}
-</div>
+```
 
-<div class="code-block code-block--output">
+```text
-{% highlight html %}{% raw %}
 bar
-{% endraw %}{% endhighlight %}
+```
-</div>
 
 ## capture
 
-<p>Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through {&#37; capture &#37;} are strings.</p>
+Captures the string inside of the opening and closing tags and assigns it to a variable. Variables created through `{% raw %}{% capture %}{% endraw %}` are strings.
 
-<div class="code-block code-block--input">
+```liquid
-{% highlight html %}{% raw %}
+{% raw %}
 {% capture my_variable %}I am being captured.{% endcapture %}
 {{ my_variable }}
-{% endraw %}{% endhighlight %}
+{% endraw %}
-</div>
+```
 
-<div class="code-block code-block--output">
+```text
-{% highlight html %}{% raw %}
 I am being captured.
-{% endraw %}{% endhighlight %}
+```
-</div>
 
 ## increment
 
 Creates a new number variable, and increases its value by one every time it is called. The initial value is 0.
 
-<div class="code-block code-block--input">
+```liquid
-{% highlight html %}{% raw %}
+{% raw %}
 {% increment variable %}
 {% increment variable %}
 {% increment variable %}
-{% endraw %}{% endhighlight %}
+{% endraw %}
-</div>
+```
 
-<div class="code-block code-block--output">
+```text
-{% highlight html %}{% raw %}
 0
 1
 2
-{% endraw %}{% endhighlight %}
+```
-</div>
 
-Variables created through the <code>increment</code> tag are independent from variables created through <code>assign</code> or <code>capture</code>. 
+Variables created through the `increment` tag are independent from variables created through `assign` or `capture`.
 
-In the example below, a variable named "var" is created through <code>assign</code>. The <code>increment</code> tag is then used several times on a variable with the same name. However, note that the <code>increment</code> tag does not affect the value of  "var" that was created through <code>assign</code>.
+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. However, note that the `increment` tag does not affect the value of  "var" that was created through `assign`.
 
-<div class="code-block code-block--input">
+```liquid
-{% highlight html %}{% raw %}
+{% raw %}
 {% assign var = 10 %}
 {% increment var %}
 {% increment var %}
 {% increment var %}
 {{ var }}
-{% endraw %}{% endhighlight %}
+{% endraw %}
-</div>
+```
 
-<div class="code-block code-block--output">
+```text
-{% highlight html %}{% raw %}
 0
 1
 2
 10
-{% endraw %}{% endhighlight %}
+```
-</div>
-
 
 ## decrement
 
 Creates a new number variable, and decreases its value by one every time it is called. The initial value is -1.
 
-<div class="code-block code-block--input">
+```liquid
-{% highlight html %}{% raw %}
+{% raw %}
 {% decrement variable %}
 {% decrement variable %}
 {% decrement variable %}
-{% endraw %}{% endhighlight %}
+{% endraw %}
-</div>
+```
 
-<div class="code-block code-block--output">
+```text
-{% highlight html %}{% raw %}
 -1
 -2
 -3
-{% endraw %}{% endhighlight %}
+```
-</div>
-
-Like <a href="#increment">increment</a>, variables declared inside <code>decrement</code> are independent from variables created through <code>assign</code> or <code>capture</code>.
-
-
-        
-
 
+Like [increment](#increment), variables declared inside `decrement` are independent from variables created through `assign` or `capture`.