title: What is the indentation standard for jinja2 syntax applied to nested blocks when optimized for readability of both jinja2 and html code
body: <p><strong>Context</strong></p>
  <p>My colleagues are starting to enhance jinja2 templates that I have developed, and I want my syntax to be as readable and easy for them to navigate as possible.  But I don't know how to resolve the challenge that I've reproduced in it's simplest form below:</p>
  <p><strong>Minimal reproducible example</strong></p>
  <p>When jinja2 syntax is not interspersed within HTML, html parent/child relationships are easy to spot because of the vertical alignment, such as in the example below:</p>
  <pre><code>&lt;li&gt;
      &lt;p&gt;List Item 1&lt;/p&gt;
      &lt;p&gt;List Item 2&lt;/p&gt;
      &lt;p&gt;List Item 3&lt;/p&gt;
      &lt;p&gt;List Item 4&lt;/p&gt;
      &lt;p&gt;List Item 5&lt;/p&gt;
  &lt;/li&gt;
  </code></pre>
  <p>And the nested blocks of jinja2 syntax are likewise easy to trace back to their hierarchical precedents in the following example:</p>
  <pre><code>{% if foo == bar %}
      {% if foo == 1 %}
          # Do something
      {% endif %}
      {% if foo == 2 %}
          # Do something
      {% endif %}
  {% endif %}
  </code></pre>
  <p>But if the two are merged, readability diminishes.</p>
  <p>When the indentation of the jinja2 template is given priority, it makes the html parent/child relationships harder to see:</p>
  <pre><code>&lt;li&gt;
      &lt;p&gt;List Item 1&lt;/p&gt;
      {% if foo == bar %}
          &lt;p&gt;List Item 2&lt;/p&gt;
          {% if foo == 1 %}
              &lt;p&gt;List Item 3&lt;/p&gt;
          {% endif %}
          {% if foo == 2 %}
              &lt;p&gt;List Item 4&lt;/p&gt;
          {% endif %}
      {% endif %}
      &lt;p&gt;List Item 5&lt;/p&gt;
  &lt;/li&gt;
  </code></pre>
  <p>And if the html indentation is given priority, it makes it harder to trace nested blocks back to their hierarchical precedents:</p>
  <pre><code>&lt;li&gt;
      &lt;p&gt;List Item 1&lt;/p&gt;
      {% if foo == bar %}
      &lt;p&gt;List Item 2&lt;/p&gt;
      {% if foo == 1 %}
      &lt;p&gt;List Item 3&lt;/p&gt;
      {% endif %}
      {% if foo == 2 %}
      &lt;p&gt;List Item 4&lt;/p&gt;
      {% endif %}
      {% endif %}
      &lt;p&gt;List Item 5&lt;/p&gt;
  &lt;/li&gt;
  </code></pre>
  <p>I've seen other indentation patterns that split the difference, but they all suffer from lack of readability.</p>
  <p>This minimal reproducible example is still fairly easy to visually parse because there is little distance between lines that share a relationship.  But the impact is much more onerous when working with large templates.</p>
  <p><strong>The Question</strong></p>
  <p>Is there an official indentation standard for jinja2 and html that minimizes these tradeoffs?  If so, where is the standard discussed?</p>
  <p><strong>What I've found so far</strong></p>
  <p>I've searched the jinja2 docs for the term &quot;indent&quot; and the two results are not relevant.  Some of the Google and Bing results address questions of indentation, but not in this particular context, like these: <a href="https://github.com/inveniosoftware/invenio/issues/1768" rel="nofollow noreferrer">link</a>, <a href="https://stackoverflow.com/questions/17124365/tidy-for-jinja2-templates">link</a>, <a href="https://stackoverflow.com/questions/57864828/how-to-indent-nested-if-for-statements-in-jinja2">link</a>, <a href="https://github.com/Glench/Vim-Jinja2-Syntax" rel="nofollow noreferrer">link</a>, <a href="https://docs.exponea.com/docs/jinja-syntax" rel="nofollow noreferrer">link</a>, <a href="https://stackoverflow.com/questions/21991479/jinja2-correctly-indent-included-block">link</a></p>
  <p>It seems like this would be a fundamental question, and I apologize if I've overlooked the obvious places where it is answered.  Thank you for your help!</p>