Filter, markdown and fenced parser

[ManzDev]

I have created a filter {{ "file.html | "include" } that reads a file and returns its content. The idea is to make small HTML-first (accessible) examples and use it in the markdown so that they are rendered without the need for Javascript in browser.

Everything works correctly, but when I indent the HTML code on file.html, it is parsed as markdown.

For example, a <style> block, indentations are interpreted as markdown and the CSS code has HTML tags inside. I understand that this is because of the "fenced code" spaces feature (I use markdown-it).

What's the best way to approach this and prevent those .html files from being processed by markdown?

[pdehaan]

There is a section on indented code in https://www.11ty.dev/docs/languages/markdown/#indented-code-blocks
But I thought that was off by default in Eleventy v2.

[ManzDev]

Thanks, I discovered outdent library and I think it is very useful.

But after analyzing the problem, I think it is not fenced code problem.
Is there a way to completely disable markdown-parsing just for the content of that .html file?

[pdehaan]

What does your custom "include" filter look like? (and I guess one of your included files).
I don't think I'm seeing the behavior locally, but maybe it might be due to the complexity of the "file.html" file.

And why not use the built-in {% include %} (or {% render %} if you're using LiquidJS)?
Not to say either of those would solve the issue, just curious why you'd need to re-implement that functionality.

[ManzDev]

My file.html:

<custom-element>
   <template shadowrootmode="open">
       <!-- markup -->

       <style>
          @layer ui;
          @import url("/entrypoint/ui.cached.css") layer(ui);
          /* styles */
       </style>

   </template>
</custom-element>

My markdown:

# title
# subtitle

text, paragraph

{{ "file.html" | include }}

I use my filter for include from custom path and no hardcoded path in mardown.
I try shortcode, filters and built-in include, but all process my file.html to markdown and add empty paragraph for (I think) empty lines from my file.html.

[pdehaan]

yeah, I'm not seeing a way to disable Markdown processing for parts of a page.
I'm also unclear on whether you want the contents of file.html to appear in the page, or if the custom-element should be rendered.

I tried wrapping the contents in a code fence and <pre> block, and that seems to suppress further Markdown handling.

Another option might be to not use .md templates directly and use the Render plugin to partially render Markdown blocks.

---
title: HoMe PaGe
subtitle: Oh, hello!
---

{% renderTemplate "md" %}
# title
# subtitle

text, paragraph
{% endrenderTemplate %}

A:

{{ "file.html" | include }}


B:

{% renderFile "./src/_includes/file.html" %}