kemko/liquid
1
0
Fork 0
mirror of https://github.com/kemko/liquid.git synced 2026-01-01 15:55:40 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Styled input/output codeblocks, going through all docs to make sure codeblocks are consistent

Browse Source
This commit is contained in:
Tetsuro
2015-12-04 21:34:18 -05:00
parent 95dc90e503
commit 6bf836b719
8 changed files with 101 additions and 372 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
_sass/modules/_content-area.scss
View File

@@ -2,8 +2,32 @@
margin-bottom: $spacing-unit * 2;
}
.code--input {
.code-block {
pre {
border-radius: 0 0 3px 3px;
border-top: none;
}
&:before {
content: 'stuff'
padding: 8px 12px;
display: block;
box-sizing: border-box;
font-weight: bold;
color: $color-white;
background: $color-blue-5;
border-bottom: none;
border-radius: 3px 3px 0 0;
}
}
.code-block--input {
&:before {
content: 'Input';
}
}
.code-block--output {
&:before {
content: 'Output';
}
}

6
basics/handles.md
View File

@@ -29,8 +29,7 @@ You can change an object's handle manually (TK how to change a handle manually)
In many cases you may know the handle of a object whose attributes you want to access. You can access its attributes by pluralizing the name of the object, then using either the square bracket ( [ ] ) or dot ( . ) notation.
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight liquid %}
{% raw %}
{{ pages.about-us.title }}
@@ -39,8 +38,7 @@ In many cases you may know the handle of a object whose attributes you want to a
{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight text %}
About Us
About Us

16
basics/truthy-and-falsy.md
View File

@@ -20,31 +20,35 @@ In the example below, the text "Tobi" is not a boolean, but it is truthy in a co
[Strings](/basics/types/#string), even when empty, are truthy. The example below will result in empty HTML tags if `settings.fp_heading` is empty:
<p class="input">Input</p>
{% highlight liquid %}{% raw %}
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% if settings.fp_heading %}
<h1>{{ settings.fp_heading }}</h1>
{% endif %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
<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>`:
[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:
<p class="input">Input</p>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% if pages[settings.page] %}
<div>{{ pages[settings.page].content }}</div>
{% endif %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
<div></div>
{% endraw %}{% endhighlight %}
</div>
## Falsy

27
basics/types.md
View File

@@ -63,17 +63,17 @@ 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="input">Input</p>
<div class="code-block code-block--input">
{% highlight liquid %}{% raw %}
The current user is {{ user.name }}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div class="code-block code-block--output">
{% highlight text %}{% raw %}
The current user is
{% endraw %}{% endhighlight %}
</div>
## Array
@@ -83,40 +83,43 @@ 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.
<p class="input">Input</p>
<div class="code-block code-block--input">
{% highlight liquid %}{% raw %}
<!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" -->
{% for user in site.users %}
{{ user }}
{% endfor %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div class="code-block code-block--output">
{% highlight text %}{% raw %}
Tobi Lina Tetsuro Adam
{% endraw %}{% endhighlight %}
</div>
#### Accessing specific items in arrays
### Accessing specific items in arrays
You can use square bracket `[ ]` notation to access a specific item in an array. Array indexing starts at zero.
<p class="input">Input</p>
<div class="code-block code-block--input">
{% highlight liquid %}{% raw %}
<!-- if site.users = "Tobi", "Lina", "Tetsuro", "Adam" -->
{{ site.users[0] }}
{{ site.users[1] }}
{{ site.users[3] }}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div class="code-block code-block--output">
{% highlight text %}{% raw %}
Tobi
Lina
Adam
{% endraw %}{% endhighlight %}
</div>
#### Initializing arrays
### Initializing arrays
You cannot initialize arrays using pure Liquid.
@@ -137,7 +140,7 @@ EmptyDrop objects only have one attribute, `empty?`, which is always *true*.
Collections and pages that *do* exist do not have an `empty?` attribute. Their `empty?` is “falsy”, which means that calling it inside an if statement will return *false*. When using an unless statement on existing collections and pages, `empty?` will return `true`.
#### Checking for emptiness
### Checking for emptiness
Using the `empty?` attribute, you can check to see if an object exists or not before you access any of its attributes.

31
tags/control-flow.md
View File

@@ -6,8 +6,7 @@ title: Control Flow
<p>Creates a switch statement to compare a variable with different values. <code>case</code> initializes the switch statement, and <code>when</code> compares its values.</p>
<p >Input</p>
<div class="code--input">
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% assign handle = 'cake' %}
{% case handle %}
@@ -21,9 +20,7 @@ title: Control Flow
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
This is a cake
{% endraw %}{% endhighlight %}
@@ -33,9 +30,7 @@ This is a cake
<p>Executes a block of code only if a certain condition is met.</p>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% if product.title == 'Awesome Shoes' %}
These shoes are awesome!
@@ -43,9 +38,8 @@ This is a cake
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
These shoes are awesome!
{% endraw %}{% endhighlight %}
@@ -55,9 +49,8 @@ These shoes are awesome!
<p>Adds more conditions within an <code>if</code> or <code>unless</code> block.</p>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
<!-- If customer.name = 'anonymous' -->
{% if customer.name == 'kevin' %}
@@ -70,9 +63,7 @@ These shoes are awesome!
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
Hey Anonymous!
{% endraw %}{% endhighlight %}
@@ -82,9 +73,7 @@ Hey Anonymous!
<p>Similar to <code>if</code>, but executes a block of code only if a certain condition is <strong>not</strong> met.</p>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% unless product.title == 'Awesome Shoes' %}
These shoes are not awesome.
@@ -92,9 +81,7 @@ Hey Anonymous!
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
These shoes are not awesome.
{% endraw %}{% endhighlight %}
@@ -102,7 +89,7 @@ These shoes are not awesome.
This would be the equivalent of doing the following:
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
{% if product.title != 'Awesome Shoes' %}
These shoes are not awesome.

99
tags/iteration.md
View File

@@ -4,16 +4,13 @@ title: Iteration
Iteration Tags are used to run a block of code repeatedly.
<a id="topofpage"></a>
### for
Repeatedly executes a block of code. For a full list of attributes available within a `for` loop, see [forloop (object)](/themes/liquid-documentation/objects/for-loops).
`for` loops can output a maximum of 50 results per page. In cases where there are more than 50 results, use the [paginate](/themes/liquid-documentation/tags/theme-tags/#paginate) tag to split them across multiple pages.
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight liquid %}{% raw %}
{% for product in collection.products %}
{{ product.title }}
@@ -21,8 +18,7 @@ Repeatedly executes a block of code. For a full list of attributes available wit
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight text %}
hat shirt pants
{% endhighlight %}
@@ -32,8 +28,7 @@ hat shirt pants
Causes the loop to stop iterating when it encounters the `break` tag.
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight liquid %}{% raw %}
{% for i in (1..5) %}
{% if i == 4 %}
@@ -45,8 +40,7 @@ Causes the loop to stop iterating when it encounters the `break` tag.
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight text %}
1 2 3
{% endhighlight %}
@@ -56,8 +50,7 @@ Causes the loop to stop iterating when it encounters the `break` tag.
Causes the loop to skip the current iteration when it encounters the `continue` tag.
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight liquid %}{% raw %}
{% for i in (1..5) %}
{% if i == 4 %}
@@ -69,8 +62,7 @@ Causes the loop to skip the current iteration when it encounters the `continue`
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight text %}
1 2 3 5
{% endhighlight %}
@@ -82,10 +74,8 @@ Causes the loop to skip the current iteration when it encounters the `continue`
<h4>limit</h4>
Exits the for loop at a specific index.
<br/><br/>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array limit:2 %}
@@ -94,9 +84,7 @@ Exits the for loop at a specific index.
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
1 2
{% endraw %}{% endhighlight %}
@@ -105,10 +93,8 @@ Exits the for loop at a specific index.
<h4>offset</h4>
Starts the for loop at a specific index.
<br/><br/>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array offset:2 %}
@@ -117,9 +103,7 @@ Starts the for loop at a specific index.
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
3 4 5 6
{% endraw %}{% endhighlight %}
@@ -127,10 +111,8 @@ Starts the for loop at a specific index.
<h4>range</h4>
Defines a range of numbers to loop through. The range can be defined by both literal and variable numbers.
<br/><br/>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% assign num = 4 %}
{% for i in (1..num) %}
@@ -143,22 +125,18 @@ Defines a range of numbers to loop through. The range can be defined by both lit
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
1 2 3 4
3 4 5
{% endraw %}{% endhighlight %}
</div>
<h4>reversed
</h4>
Reverses the order of the for loop.
<br/><br/>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
<!-- if array = [1,2,3,4,5,6] -->
{% for item in array reversed %}
@@ -167,34 +145,12 @@ Reverses the order of the for loop.
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
6 5 4 3 2 1
{% endraw %}{% endhighlight %}
</div>
</div>
### cycle
@@ -203,8 +159,7 @@ Loops through a group of strings and outputs them in the order that they were pa
<code>cycle</code> must be used within a <a href="#for">for</a> loop block.
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% cycle 'one', 'two', 'three' %}
{% cycle 'one', 'two', 'three' %}
@@ -213,8 +168,7 @@ Loops through a group of strings and outputs them in the order that they were pa
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
one
two
@@ -232,7 +186,6 @@ Uses for <code>cycle</code> include:
<h2 class="parameter">parameters <span>cycle</span></h2>
<code>cycle</code> accepts a parameter called <strong>cycle group</strong> in cases where you need multiple <code>cycle</code> blocks in one template. If no name is supplied for the cycle group, then it is assumed that multiple calls with the same parameters are one group.
<p>The example below shows why cycle groups are necessary when there are multiple instances of the cycle block.</p>
@@ -334,9 +287,7 @@ Uses for <code>cycle</code> include:
<p>Generates an HTML <code>&#60;table&#62;</code>. Must be wrapped in an opening &lt;table&gt; and closing &lt;/table&gt; HTML tags. For a full list of attributes available within a tablerow loop, see <a href="/themes/liquid-documentation/objects/tablerow">tablerow (object)</a>.</p>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
<table>
{% tablerow product in collection.products %}
@@ -346,10 +297,7 @@ Uses for <code>cycle</code> include:
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
<table>
<tr class="row1">
@@ -381,14 +329,11 @@ Uses for <code>cycle</code> include:
<h2 class="parameter">parameters <span>tablerow</span></h2>
<h4>cols</h4>
Defines how many columns the tables should have.
<br/><br/>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% tablerow product in collection.products cols:2 %}
{{ product.title }}
@@ -396,9 +341,7 @@ Defines how many columns the tables should have.
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
<table>
<tr class="row1">

213
tags/theme.md
View File

@@ -10,38 +10,21 @@ Theme Tags have various functions, including:
- Splitting a returned array into multiple pages.
<a id="topofpage"></a>
### comment
<p>Allows you to leave un-rendered code inside a Liquid template. Any text within the opening and closing <code>comment</code> blocks will not be output, and any Liquid code within will not be executed.</p>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
My name is {% comment %}super{% endcomment %} Shopify.
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
My name is Shopify.
{% endraw %}{% endhighlight %}
</div>
### include
@@ -71,12 +54,9 @@ Or you can consolidate them into one line of code:
{% include 'snippet', snippet_variable: 'this is it', snippet_variable_two: 'this is also it' %}
{% endraw %}{% endhighlight %}
<h2 class="parameter">parameters <span>include</span></h2>
#### with
### with
The <code>with</code> parameter assigns a value to a variable inside a snippet that shares the same name as the snippet.
@@ -107,52 +87,13 @@ color: 'blue' shape: 'circle'
color: 'red' shape: 'square'
{% endraw %}{% endhighlight %}
### form
Creates an HTML <code>&#60;form&#62;</code> element with all the necessary attributes (action, id, etc.) and <code>&#60;input&#62;</code> to submit the form successfully.
<h2 class="parameter">parameters <span>form</span></h2>
#### activate_customer_password
Generates a form for activating a customer account on the <a href="/themes/theme-development/templates/customers-activate-account/">activate_account.liquid</a> template.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'activate_customer_password' %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account/activate" method="post">
<input name="form_type" type="hidden" value="activate_customer_password" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
#### new_comment
### new_comment
Generates a form for creating a new comment in the <a href="/themes/theme-development/templates/article-liquid/">article.liquid</a> template. Requires the <code>article</code> object as a parameter.
@@ -177,152 +118,6 @@ Generates a form for creating a new comment in the <a href="/themes/theme-develo
{% endraw %}{% endhighlight %}
</div>
#### contact
Generates a form for submitting an email through the <a href="/manual/configuration/store-customization/communicating-with-customers/provide-contact-points/add-a-contact-form">Liquid contact form</a>.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'contact' %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="/contact" class="contact-form" method="post">
<input name="form_type" type="hidden" value="contact" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
#### create_customer
Generates a form for creating a new customer account on the <a href="/themes/theme-development/templates/customers-register/">register.liquid</a> template.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'create_customer' %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account" id="create_customer" method="post">
<input name="form_type" type="hidden" value="create_customer" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
#### customer_address
Generates a form for creating or editing customer account addresses on the <a href="/themes/theme-development/templates/customers-addresses/">addresses.liquid</a> template. When creating a new address, include the parameter <code>customer.new_address</code>. When editing an existing address, include the parameter <code>address</code>.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'customer_address', customer.new_address %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="/account/addresses/70359392" id="address_form_70359392" method="post">
<input name="form_type" type="hidden" value="customer_address" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
#### customer_login
Generates a form for logging into Customer Accounts on the <a href="/themes/theme-development/templates/customers-login/">login.liquid</a> template.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'customer_login' %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="https://my-shop.myshopify.com/account/login" id="customer_login" method="post">
<input name="form_type" type="hidden" value="customer_login" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
#### recover_customer_password
Generates a form for recovering a lost password on the <a href="/themes/theme-development/templates/customers-login/">login.liquid</a> template.
<p class="input">Input</p>
<div>
{% highlight html %}{% raw %}
{% form 'recover_customer_password' %}
...
{% endform %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
{% highlight html %}{% raw %}
<form accept-charset="UTF-8" action="/account/recover" method="post">
<input name="form_type" type="hidden" value="recover_customer_password" />
<input name="utf8" type="hidden" value="✓" />
...
</form>
{% endraw %}{% endhighlight %}
</div>
### layout
Loads an alternate template file from the **layout** folder of a theme. If no alternate layout is defined, the **theme.liquid** template is loaded by default.

53
tags/variable.md
View File

@@ -4,16 +4,11 @@ title: Variable
Variable Tags are used to create new Liquid variables.
## assign
<p>Creates a new variable.</p>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% assign my_variable = false %}
{% if my_variable != true %}
@@ -22,9 +17,7 @@ Variable Tags are used to create new Liquid variables.
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
This statement is valid.
{% endraw %}{% endhighlight %}
@@ -32,41 +25,31 @@ Variable Tags are used to create new Liquid variables.
Use quotations ("") to save the variable as a string.
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% assign foo = "bar" %}
{{ foo }}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% 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>
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% capture my_variable %}I am being captured.{% endcapture %}
{{ my_variable }}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
I am being captured.
{% endraw %}{% endhighlight %}
@@ -76,17 +59,15 @@ I am being captured.
Creates a new number variable, and increases its value by one every time it is called. The initial value is 0.
<p class="input">Input</p>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% increment variable %}
{% increment variable %}
{% increment variable %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
0
1
@@ -98,9 +79,7 @@ Variables created through the <code>increment</code> tag are independent from va
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>.
<p class="input">Input</p>
<div>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% assign var = 10 %}
{% increment var %}
@@ -110,9 +89,7 @@ In the example below, a variable named "var" is created through <code>assign</co
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
0
1
@@ -126,17 +103,15 @@ In the example below, a variable named "var" is created through <code>assign</co
Creates a new number variable, and decreases its value by one every time it is called. The initial value is -1.
<p class="input">Input</p>
<div class="code-block code-block--input">
{% highlight html %}{% raw %}
{% decrement variable %}
{% decrement variable %}
{% decrement variable %}
{% endraw %}{% endhighlight %}
</div>
<p class="output">Output</p>
<div>
<div class="code-block code-block--output">
{% highlight html %}{% raw %}
-1
-2