Adding markdown-it renderer to match VS Code parser?

[shah]

This is a great library, thanks for putting it together! We've been using it but have noticed small variations between our multiple systems where we edit and render Markdown. In HTML we use <md-block> but in CLI code generators we use markdown-it rendering because VS Code also uses it.

Since VS Code uses markdown-it and we use VSC for editing our markdown files we were thinking of forking <md-block> to support markdown-it. I was curious if you were thinking of allow different renderers (through configuration) for <md-block>? How hard might it be if we sponsored that work?

[LeaVerou]

Looking at markdown-it, I think the primary reason I decided not to go with it originally is that it doesn't provide an ESM build. That might be where to start. Once they do that, I'd be open to discussing incorporating it in md-block, since you are open to sponsoring said time.

[shah]

@LeaVerou I see this esm.markdown-it, though it's a couple of years old and I'm not sure if it's a fork or keeps pace with the original library. When you have a minute please check it out and see if it might suffice. Thanks!

[shah]

The esm.markdown-it is based on an ancient version so that's a no-go. However, this appears to work for ESM loading:

import { default as markdownIt } from "https://jspm.dev/markdown-it@12.2.0";
import { default as markdownItReplaceLink } from "https://jspm.dev/markdown-it-replace-link@1.1.0";
import { default as markdownItFootnote } from "https://jspm.dev/markdown-it-footnote@3.0.3";
import { default as markdownItAnchor } from "https://jspm.dev/markdown-it-anchor@8.3.0";
import { default as markdownItTitle } from "https://jspm.dev/markdown-it-title@4.0.0";
import { default as markdownItDirective } from "https://jspm.dev/markdown-it-directive@1.0.1";
import { default as markdownItDirectiveWC } from "https://jspm.dev/markdown-it-directive-webcomponents@1.2.0";
import { default as markdownItHashtag } from "https://jspm.dev/markdown-it-hashtag@0.4.0";
import { default as markdownItTaskCheckbox } from "https://jspm.dev/markdown-it-task-checkbox";

[shah]

I've solved my problem for now so I'm closing this ticket, but here's the code I was able to get working without any special components or tags. If this helps you for <md-block> feel free to use it! :-)

<pre data-content-nature="markdown" style="display:none">
# h1 Heading 8-)
## h2 Heading
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading
</pre>

<script type="module">
import { default as markdownIt } from "https://jspm.dev/markdown-it@12.2.0";
import { default as markdownItFootnote } from "https://jspm.dev/markdown-it-footnote@3.0.3";

const mdElems = document.querySelectorAll(`[data-content-nature="markdown"]`);
if (mdElems && mdElems.length > 0) {
    const mdi = markdownIt({
        html: true,
        linkify: true,
        typographer: true,
    });
    mdi.use(markdownItFootnote);
    for (const mde of mdElems) {
        const markdown = unindentWhitespace(mde.innerText);
        const formatted = document.createElement("div");
        formatted.innerHTML = mdi.render(markdown);
        formatted.dataset.contentTransformedFrom = "markdown";
        mde.replaceWith(formatted);
    }
}
</script>