Markdown to HTML

GitHub Flavored Markdown #

This QIP component combines CommonMark 0.31.2 with GFM tables, task lists, strikethrough, extended autolinks, and tag filtering in 97.83 kB of WebAssembly.

CommonMark 0.31.2 #

This QIP component is just CommonMark 0.31.2 in 92.65 kB of WebAssembly.

Download #

CLI #

npx qipdo qip.dev text/markdown/gfm-commonmark.0.31.2.wasm < page.md > page.html
npx qipdo qip.dev text/markdown/commonmark.0.31.2.wasm < page.md > page.html

JavaScript #

const markdownRenderer = await WebAssembly.instantiateStreaming(
  fetch("gfm-commonmark.0.31.2.wasm"),
);
const encoder = new TextEncoder(), decoder = new TextDecoder();

function renderMarkdown(source) {
  const {
    memory,
    input_ptr,
    input_utf8_cap,
    render,
  } = markdownRenderer.instance.exports;
  const input = new Uint8Array(memory.buffer, input_ptr(), input_utf8_cap());
  const { read, written } = encoder.encodeInto(source, input);
  if (read !== source.length) throw new RangeError("Markdown input is too large");
  const result = BigInt.asUintN(64, render(written));
  if ((result >> 63n) !== 0n) throw new Error("rejected input");
  const outputSize = Number(result & 0xffff_ffffn);
  const outputPtr = Number((result >> 32n) & 0x7fff_ffffn);
  return decoder.decode(new Uint8Array(memory.buffer, outputPtr, outputSize));
}

const markdown = `# Project status

| Feature | Status |
| --- | --- |
| Tables | Ready |
| Task lists | In progress |

- [x] Render CommonMark 0.31.2
- [x] Add ~~plain Markdown~~ GFM
- [ ] Ship it

Visit https://github.github.com/gfm/`;

document.querySelector("main article").innerHTML = renderMarkdown(markdown);