How to prevent eleventy/nunjucks from escaping content inside a for loop

When using a {% for ... %} loop inside an included nunjucks template (e.g. {% include ... %}) in eleventy, the generated contents of the loop are rendered inside <pre><code>...</code></pre> blocks.

Here is the contents of the include:

src/includes/recipe-ingredients.html

<aside id="ingredients" aria-label="ingredients">
  <h3>Ingredients</h3>
  <ul>
    {% for ingredientData in recipe.ingredients %}

    <li><span class="measure">{{ ingredientData.displayQty }}</span>
    <span class="ingredient">{{ ingredientData.ingredient }}</span></li>

    {% endfor %}
  </ul>
</aside>

... and this is what gets generated:

<!-- Rest of generated HTML -->
<aside id="ingredients" aria-label="ingredients">
  <h3>Ingredients</h3>
  <ul>
<pre><code>&lt;li&gt;&lt;span class=&quot;measure&quot;&gt;2&lt;/span&gt;
&lt;span class=&quot;ingredient&quot;&gt;cinnamon&lt;/span&gt;&lt;/li&gt;


&lt;li&gt;&lt;span class=&quot;measure&quot;&gt;3/4&lt;/span&gt;
&lt;span class=&quot;ingredient&quot;&gt;sugar&lt;/span&gt;&lt;/li&gt;
</code></pre>
  </ul>
</aside>
<!-- Rest of generated HTML -->

Why is this happening and how do I prevent it?