Markdown in HTML renders in snippets when used within tabs, but not in normal markdown. Why?

[Andre601]

I've noticed a rather strange behaviour with the snippets extension. That is, the extension renders markdown within HTML just fine when used within tabs of the tabbed extension, but not outside of it.

As an example, I use this snippet as api_version.md:

<div class="mdx-badge"><span class="mdx-badge__icon">[:octicons-alert-24:](changelog.md)</span><span class="mdx-badge__text">[v3.1.0](changelog.md#v3.1.0 'View latest Release Changelog')</span></div>

Now, when I use it inside a tab like this:

=== "Tab"

   --8<-- "api_version.md"

is it rendering the markdown inside the HTML of that snippet:

But just using it in the markdown file itself:

--8<-- "api_version.md"

does not parse the Markdown:

What is the difference? Is Tabbed content going through a separate markdown processing?

[facelessuser]

This has to do with how Python Markdown, not Tabs parses Markdown.

Generally, Python Markdown requires block tags (like <div>) to have the start and end on different lines, but this will not automatically parse the HTML content as Markdown.

<div>
**content**
</div>

To parse the content as Markdown, you need to use the md_in_html extension and apply the markdown attribute:

<div markdown>
**content**
</div>

While the Python Markdown documentation does not explain this well, these cases are meant for root-level HTML. This can cause inconsistencies when we are using HTML that is not at the root level; for instance, in indented constructs.

When we use this under indented constructs it appears the Markdown parser treats it all as inline HTML and parses the Markdown content.

MD = """
-   Test

    <div>
    **content**
    </div>

    <div markdown>
    **content**
    </div>
"""

import markdown
print(markdown.markdown(MD))

<ul>
<li>
<p>Test</p>
<p><div>
<strong>content</strong>
</div></p>
<p><div markdown>
<strong>content</strong>
</div></p>
</li>
</ul>

I'm personally not a fan of how this is handled in Python Markdown, but I also haven't had the time to dig into the current HTML parser logic Python Markdown to see how easily we could alter the logic to get consistent handling.

So, to answer your question as to why there is an inconsistency, it is because that is how Python Markdown handles HTML. It has nothing to do with Tabs.

[facelessuser]

I guess, to be more direct, I would use the block format with md_in_html in all cases to get more consistent results:

<div class="mdx-badge" markdown>
<span class="mdx-badge__icon">[:octicons-alert-24:](changelog.md)</span><span class="mdx-badge__text">[v3.1.0](changelog.md#v3.1.0 'View latest Release Changelog')</span>
</div>