Some html content of .njk file that is included in .md file is rendered as raw text
kirillunlimited opened this issue · comments
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><li>
Element 2
</li>
<li>
Element 1
</li>
</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?
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",
},
};
};
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.
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
I finally found it in docs
https://mozilla.github.io/nunjucks/templating.html#whitespace-control