Using a for loop in Liquid renders content in <code><pre>... </pre></code> wrapper

[j3ffgray]

Describe the bug
I'm passing in the property "tags" as a comma separated list into a liquid partial. Inside the partial, I'm breaking that into an array using a technique noted in the docs.

{% assign t = tags | split: ", " %}
{% for item in t %} <span class="demo-tag"> {{ item }} </span> {% endfor %}

When this is rendered, it wraps that for loop in a code and pre tag wrapper.

 <span class="demo-tag"> tacos </span>  <span class="demo-tag"> burritos </span>  <span class="demo-tag"> taquitos </span> 

Expected behavior
Is there a way to prevent that wrapper and cleanly write the HTML in?

[denisbrodbeck]

I don't think we can we can triage the issue without a little bit more of your code.
What is the surrounding template code? Does it get transformed multiple time (like you have a markdown file, which first gets transformed through liquid and after that through markdown-it)?
If that file is a markdown file, are you aware that there is an alternative syntax for code fences, which automatically parses every line with four leading spaces as a code fence (which is highly annoying and most times not what was intended)?

[j3ffgray]

This is the layout of things:

_includes
  layouts
    tutorial.liquid
  partials
    card.liquid
learn
  new-tutorial.md

The new-tutorial.md is using the tutorial.liquid for its general rendering. Occasionally, mixed with the markdown, I'll make a call to a partial so that I can include a design pattern and pass some parameters. So, the markdown looks something like this...

---
front-matter: "a setting"
---

# header here

Some text and **something bold** is happening.

{% include partials/card text:"card stuff", tags:"list, of, stuff, with, spaces" %}

## Additional stuff...

The card.liquid has something simple like:

<div class="card-element">
  <span class="tags">
    {% assign t = tags | split: ", " %}
    {% for item in t %} <span class="demo-tag"> {{ item }} </span> {% endfor %}
  </span>
</div>

Rather than the for loop rendering HTML, it ends up wrapping all that content in a pre and code tag, which I can't seem to disable.

Hopefully that provides some additional context.

[denisbrodbeck]

{% for item in t %} <span class="demo-tag"> {{ item }} </span> {% endfor %}

Yes, that's 99% where your code fence is created.

There are two phases for rendering your markdown:

• first pass: run liquid over your raw markdown file
• second pass: run markdown-it parser over your liquified markdown file

After the first pass your markdown file looks like this:

---
front-matter: "a setting"
---

# header here

Some text and **something bold** is happening.

<div class="card-element">
  <span class="tags">

    <span class="demo-tag"> list </span>  <span class="demo-tag"> of </span>  <span class="demo-tag"> stuff </span>...
  </span>
</div>

## Additional stuff...

See those at least 4 spaces before that <span class="demo-tag"> list </span> <span class="demo-tag"> of </span>... part?

Exactly this line will be parsed as a code fence by your friendly markdown parser (see alternative syntax). You can try pasting the above first-pass snippets into an online markdown editor and see it for yourself.

The thing is, if there wasn't an empty line before that <span class="demo-tag"> list </span> <span class="demo-tag"> of </span>..., it would have worked as intended, but the empty line (the call to {% assign t = tags | split: ", " %} leaves a blank line behind) breaks up the block and causes the next line the be parsed as code fence.

One way to solve this would be to strip the resulting whitespace around {% assign t = tags | split: ", " %} like this:

{%- assign t = tags | split: ", " -%}

[j3ffgray]

Apologies, I thought I had replied directly after you posted. This information was very helpful, thank you!

[zachleat]

I think this is another Indented Code Blocks victim https://www.11ty.dev/docs/languages/markdown/#indented-code-blocks

The default behavior changed in 2.0: #2438