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 #

go install github.com/royalicing/qip@latest
qip run text/markdown/gfm-commonmark.0.31.2.wasm < page.md > page.html
qip run 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 = encoder.encode(source);
  if (input.length > input_utf8_cap()) throw new RangeError("Markdown input is too large");
  new Uint8Array(memory.buffer, input_ptr(), input.length).set(input);
  const result = BigInt.asUintN(64, render(input.length));
  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);