59

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.

Fenikso
  • 9,251
  • 5
  • 44
  • 72
  • If you indent register.html with 8 spaces, you get the desired result. – voscausa Feb 24 '14 at 21:32
  • 12
    @voscausa - This is exactly what I want to avoid. The indentation in `base.html` may change. I do not want to re-indent `register.html` every time. – Fenikso Feb 26 '14 at 15:28
  • related question and its answers: https://stackoverflow.com/questions/10821539/jinja-keep-indentation-on-include-or-macro/71467956#71467956 – Sascha Mar 14 '22 at 12:40
  • Does this answer your question? [Jinja keep indentation on include or macro](https://stackoverflow.com/questions/10821539/jinja-keep-indentation-on-include-or-macro) – Sascha Mar 14 '22 at 12:41

3 Answers3

74

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 %}
M. Scho.
  • 848
  • 7
  • 10
51

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) }}
Community
  • 1
  • 1
Midnighter
  • 3,771
  • 2
  • 29
  • 43
  • What about `{% call render_register_form(my_form) %}`? – Gill Bates Apr 23 '16 at 15:57
  • I'm not sure what your comment is addressing @GillBates... Can you elaborate a little? – Midnighter Apr 24 '16 at 18:56
  • Using indent on Jinja 2.10 escapes my HTML. Is this normal? – Usagi Dec 21 '18 at 18:44
  • @Usagi I have the same problem, did you find a solution on how to use the indent filter without escaping the html syntax, or how to unescape it again afterwards – maxbachmann Jun 10 '19 at 10:27
  • You can try the recommendations from http://jinja.pocoo.org/docs/2.10/templates/#working-with-automatic-escaping thus either the `| safe` filter or using `MarkupSafe.Markup` before passing content to the template. – Midnighter Jun 13 '19 at 09:07
4

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.

Miguel Grinberg
  • 65,299
  • 14
  • 133
  • 152