Jinja2 correctly indent included block

I have two files:

base.html

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>{{title}}</title>
    </head>
    <body>
       {% block content %}
       {% endblock %}   
    </body>
</html>

register.html

{% extends "base.html" %}
{% block content %}
<h1>Register</h1>
<form action="" method="post" name="register">
    {{ form.hidden_tag() }}
    {{ form.login.label }} {{ form.login(size=20) }}
    {{ form.password.label }} {{ form.password(size=20) }}
    <input type="submit" value="Register">
</form>
{% endblock %}

It gets rendered like this:

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>Register</title>
    </head>
    <body>

<h1>Register</h1>
<form action="" method="post" name="register">
    <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1393257771.168161##ce877b3519f192c05d3b409f3b7b07bb147dead7"></div>
    <label for="login">login</label> <input id="login" name="login" size="20" type="text" value="">
    <label for="password">password</label> <input id="password" name="password" size="20" type="password" value="">
    <input type="submit" value="Register">
</form>

    </body>
</html>

I would like to achieve this:

<!DOCTYPE html>
<html>
    <head>
       <meta charset="UTF-8">
       <title>Register</title>
    </head>
    <body>
        <h1>Register</h1>
        <form action="" method="post" name="register">
            <div style="display:none;"><input id="csrf_token" name="csrf_token" type="hidden" value="1393257771.168161##ce877b3519f192c05d3b409f3b7b07bb147dead7"></div>
            <label for="login">login</label> <input id="login" name="login" size="20" type="text" value="">
            <label for="password">password</label> <input id="password" name="password" size="20" type="password" value="">
            <input type="submit" value="Register">
        </form>
    </body>
</html>

Am I missing something? I tried Google and messing with the template indentations, also indent filter does not seem to apply here. I do not want to hard-code the indentation in the inner block, as that would break if I decide to change the formatting and elements in the base later.

Solution 1:

I know, the question is rather old but I found a nice solution to this problem. You can apply filters to whole text blocks: Template Designer Documentation / Filters

{% filter indent(width=4) %}
{% include "./sub-template.yml.j2" %}
{% endfilter %}

Solution 2:

Although I think the increase in document size is a good argument against "correctly" indenting documents, jinja2 actually provides a function to do just what you what:

indent(s, width=4, indentfirst=False)

which you would use in your base.html with a macro, as described in this answer on SO.

I would probably make that a macro anyway and call it render_register_form:

{% macro render_register_form(form) %}
    <h1>Register</h1>
    <form action="" method="post" name="register">
        {{ form.hidden_tag() }}
        {{ form.login.label }} {{ form.login(size=20) }}
        {{ form.password.label }} {{ form.password(size=20) }}
        <input type="submit" value="Register">
    </form>
{% endmacro %}

and then include it where needed, for example, with 8 spaces indentation, as:

{{ render_register_form(my_form)|indent(8, True) }}

Solution 3:

Good question. I believe Jinja2 does not do this.

The main question you need to ask yourself is why you want the HTML to be correctly indented, since browsers do not care. In a production application it is more efficient to go the other way and strip all the white space to make the page smaller.

If you are interested in doing this during development then you can pass the HTML generated by render_template() through an indenter such as prettify() from BeautifulSoup. I do not recommend this for a production system, since your functions will take longer to run.

Jinja2 correctly indent included block

Solution 1:

Solution 2:

Solution 3:

Related

Recent Posts