Some html content of .njk file that is included in .md file is rendered as raw text

[kirillunlimited]

I have a list that is represented as separate files:
list/element1.md

---
title: Element 1
---

list/element2.md

---
title: Element 2
---

list/list.json

{
  "tags": "list"
}

I would like to output them as collection.
I iterate over them in the separate .njk file (this is an example, the real layout is a little bit more complicated):
inlcudes/list.njk

<ol>
  {% for element in collections.list %}
    <li>
        {{element.data.title}}
    </li>
  {% endfor %}
</ol>

Then I include this .njk file in my final .md page file.
pages/home.md

---
layout: page.njk
title: Home
templateEngineOverride: md,njk
---
# Home page
{% include 'list.njk' %}

The problem is that content inside for-loop is wrapped inside pre tag:

<h1>Home page</h1>
<ol>
<pre><code>&lt;li&gt;
    Element 2
&lt;/li&gt;
&lt;li&gt;
    Element 1
&lt;/li&gt;
</code></pre>
</ol>

I tried different combinations of values in templateEngineOverride parameter but none worked.
Yes, I can use .njk instead .md as page file extension, but I need to be able to use markdown in it. Also I can't output list directly in .md file as I want to put this list in another pages with include.

Please help. Are there any solutions?

[pdehaan]

I believe you're seeing https://www.11ty.dev/docs/languages/markdown/#there-are-extra-and-in-my-output.

Here's what my modified .eleventy.js file looked like:

const markdownIt = require("markdown-it");

module.exports = (eleventyConfig) => {
  const markdownLib = markdownIt({
    html: true,
  }).disable("code"); // This `.disable("code")` is the important part here.

  eleventyConfig.setLibrary("md", markdownLib);

  return {
    markdownTemplateEngine: "njk",
    dir: {
      input: "src",
      output: "www",
    },
  };
};

[pdehaan]

More context from the Markdown spec: https://daringfireball.net/projects/markdown/syntax#precode

To produce a code block in Markdown, simply indent every line of the block by at least 4 spaces or 1 tab.

Although I find that it is rarely behavior I want when using Nunjucks or Liquid templates in Markdown files.

[kirillunlimited]

@pdehaan

I believe you're seeing https://www.11ty.dev/docs/languages/markdown/#there-are-extra-and-in-my-output.
Wow! I have already read this article, but I didn't realize that the problem is in markdown. I thought it was all about njk for-loop 😊

Thank you very much, I managed to fix the output after editing the indents.

Also I have found another solution in several 11ty projects:

<ol>
  {%- for element in collections.list -%}
    <li>
        {{element.data.title}}
    </li>
  {%- endfor -%}
</ol>

Replacing {% and %} with {%- and -%} allows to output valid html with any indents. I didn't find anything in 11ty docs about this behavior, but it looks like the best solution 🤔

[kirillunlimited]

I finally found it in docs
https://mozilla.github.io/nunjucks/templating.html#whitespace-control