Step
Steps allow to create numbered lists that should guide the reader through some process. It improves over default Markdown lists (which are still a valid use in many cases) in several ways:
- By default, they stand out a bit more with a more prominent appearance, though you can change that with your own custom styling
- By giving each step a
set(see definition), a list of Steps can be split up and placed at several different places in the DOM, while the counter doesn't lose track and keeps counting correctly. - There is no need to fight Markdown indentation rules, you can nest any content you'd like, while your source document keeps a clear and understandable layout.
Definition
| Argument | Type | Notes |
|---|---|---|
| set | string |
specify a set to group related steps, regardless of where they are located in the DOM |
| pos | "first"|"last"|"first,last" |
whether this step is the first or last in its list of steps; specify "first,last" if this step is the only in this list |
Usage
{% step "instruction" "first,last" %}
Some information on step 1.
{% endstep %}
Some in-between text...
{% step "instruction" "first" %}
Some information on step 2.
{% endstep "instruction" %}
{% step "instruction" "last" %}
Some information on step 3.
{% endstep "instruction" %}This translates to HTML that looks a bit like this:
<ol>
<!-- sets up a set called "instruction" -->
<li>Some information on step 1.</li>
</ol>
<p>Some in between text...</p>
<ol>
<!-- Continues counting from the above list -->
<li>Some information on step 2.</li>
<li>Some information on step 3.</li>
</ol>Example
When rendered, the above setup looks like this:
-
Some information on step 1.
Some in-between text...
-
Some information on step 2.
-
Some information on step 3.