Markdown-it

Display markdown as HTML (see #895). Markdown-it is used internally by Framework, which means we can import it directly from node_modules. (If you need any plugins, you will have to add them with yarn add and import them here also.)

import markdownit from "markdown-it";
import matter from "npm:gray-matter";

const Markdown = new markdownit({html: true});

const md = {
  unsafe(string) {
    const template = document.createElement("template");
    template.innerHTML = Markdown.render(string);
    return template.content.cloneNode(true);
  }
};

display(md.unsafe(`### Hello, ${"world"}!`));

const text = FileAttachment("markdown-it.md").text();

const {content} = matter(text); // remove front-matter
display(html`<div style="border: 0.5px solid orange; padding: 3em;">${md.unsafe(content)}</div>`);