Video outline

An indentation or indent is a technique that is used to appoint paragraphs or other logical blocks in the code.

In Silverfin, there are two ways how indentations can be used:

1. To structure your code
2. To indent formatting in markdown

When used for code structuring purposes, indent doesn’t have any symbol, it is just an empty space that is left at the beginning of a row. While when we use indent formatting in markdown, indent can be displayed by using the indent function {::indent level="X"} Text {:/indent} or by printing a combination of a dash and an arrow ---> .

Let’s first discuss why is indentation important when it comes to a code structure.

Unlike in other programming languages, in Liquid indentation doesn’t impact code’s behaviour. It is optional, but needed for readability. When you are writing a code, your main goal is to communicate your message to the target computer. However, it is equally important to write code so that other developers can easily read and understand it. Let’s have a look at the first example.

Example 1

{% assign show_message = "indenting is great" %}
{% for item in collection %}
{% if item == true %}
{% ic %}
{{ show_message }}
{% endic %}
{% endif %}
{% endfor %}

Small sample of a code, but already difficult to read. In this case, a reviewer would have to count opening and closing braces, to figure out where an if statement, a loop or a function ends. Quite challenging, don’t you think?

Now let’s have a look at the second code.

{% assign show_message = "indenting is great" %}
{% for item in collection %}
    {% if item == true %}
        {% ic %}
            {{ show_message }}
        {% endic %}
    {% endif %}
{% endfor %}

It is exactly the same code. The main difference here is that it is indented. Amazing how a small change can make such a big difference. In this case we can track where is the beginning of a loop, what is displayed inside the if statement, etc.

As you can see from this example, by consistently indenting code that is subordinate to or controlled by surrounding code, you send a clear visual message to the person about the structure of your code.

This is very important when you are working in a team and other developers have to review or maintain your code. Therefore, be kind to whomever has to read your code and use indentation.

Now let’s have a look how to indent formatting in markdown.

Example 2

If you have a template in which you would like to display information at different levels, you can use indent for this. It is possible to decide how much you would like to indent your text, by choosing the indent level. At this point the indent limit is set to 10, but this already should give you a lot of freedom. To indent your text, you should open an indent function, choose an indent level from 1 to 10, enter text that you want to indent and close the indent function.

{::indent level="10"}
This text is indented
{:/indent}

{::indent level="8"}
This text is indented
{:/indent}

{::indent level="6"}
This text is indented
{:/indent}

In case you would like to indent text in a table, you can add a combination of a dash and an arrow next to the pipe. Let’s have a look.

{% stripnewlines %}
|----25%----
|-----------+
{% newline %}
| **Some header we use without indent**
|  
{% newline %}
|-> This is some nifty code we can use for long sentences like these, right? 
{% endstripnewlines %}

If you want to indent your text even more, just keep on adding dashes, but don’t get too excited, there is also a limitation of 10.

{% stripnewlines %}
|----25%----
|-----------+
{% newline %}
| **Some header we use without indent**
|
{% newline %}
|---------->This is some nifty code we can use for long sentences like these, right? 
{% endstripnewlines %}

Conclusion

• Indentation is a technique that is used to structure structure your code
• In Liquid indent formatting can be used in markdown
• It helps to improve readability