Can I automatically add html to the output file when I run 11ty?

[mimuki]

Vague title, I'm sorry. I'm not super familiar with the terminology here or static site generators in general. Basically, I want to write my websites in markdown, but apply formatting to the output html in a consistent way, like this:

## Cool title
a bunch of example text, potentially with lists or subheadings
## Other title
etc etc

becoming:

<section>
<h2>Cool title</h2>
<p>a bunch of example text, potentially with lists or subheadings</p>
</section>
<section>
<h2>Other title</h2>
<p>etc etc</p>
</section>

Anything between a h2 and the next h2 being enclosed in a <section>, without writing my markdown files differently. Is this possible? Are other, similar ideas possible as well, like "the first 2 sections are both put inside a parent <div class="example">, the rest are in a <div class="somethingElse">?

I looked through the documentation & the discussions here, and couldn't find anything (but it's possible I don't know the right search terms for what I want). This seems like something that would exist already, but if it does I can't find it. If it doesn't, what's the best way to do what I'm after?

[btrem]

A few different ideas:

1. markdown-it-container.
2. shortcode
3. write the html container markup directly in the .md file.

For the first one, install markdown-it-container and define your container as <section>. Then in your markdown file, do this:

::: 
## Cool title
a bunch of example text, potentially with lists or subheadings

:::
## Other title
etc etc

For the second option, define a paired shortcode in eleventy.js:

eleventyConfig.addPairedShortcode("myContainer", function(content) {
  return `<section>
${content}
</section>`;

Then in your markdown file, do this:

{% myContainer %}
## Cool title
a bunch of example text, potentially with lists or subheadings
{% endmyContainer %}

{% myContainer %}
## Other title
etc etc
{% endmyContainer %}

For the third option, simply insert the <section> markup in your md file:

<section>
## Cool title
a bunch of example text, potentially with lists or subheadings
</section>
<section>
## Other title
etc etc
</section>

This third option assumes that html is enabled in your markdown configuration, which is the 11ty default.

[dwhieb]

11ty's documentation explicitly says 2 might not work as expected.

And the CommonMark spec (which markdown-it, 11ty's markdown parser, says it adheres to) also doesn't parse markdown inside of HTML blocks, as also noted by 11ty at the same place above.

And yet, when I try option 3, it works just fine. 🤷🏼‍♂️ I think markdown-it's html option must be parsing markdown inside of HTML blocks.