Indented lines in an if statement get converted to a code block

I have the following liquid code:

{%- for page in site.articles -%}
  {%- if page.preview -%}
    <h2>foo</h2>
    <h3>bar</h3>
  {%- endif -%}
{%- endfor -%}

It produces this result:

<h2>foo</h2>
<div class="highlighter-rouge"><div class="highlight"><pre class="highlight"><code>&lt;h3&gt;bar&lt;/h3&gt;
</code></pre></div></div>

when I am expecting it to produce:

<h2>foo</h2>
<h3>bar</h3>

Is there a way to properly indent my for loop and if statement, and have it produce the correct result? Or should I just not indent liquid control structures?

one way to do a code block in markdown is to indent 4 spaces - which is what you have. Seems weird the h2 was not in the block.

Guess I would just not indent the liquid bit.

Is this Liquid/HTML in a .md (Markdown) or .html file?

If it’s in Markdown file, indents are treated as code blocks and will escape HTML. Only way to get it to render correctly is remove the indents/spaces.