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 51.39 kB of WebAssembly.

CommonMark 0.31.2 #

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

Download #

CLI #

go install github.com/royalicing/qip@latest
qip run components/text/markdown/gfm-commonmark.0.31.2.wasm < page.md > page.html
qip run components/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,
    output_ptr,
    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 outputSize = render(input.length);
  return decoder.decode(new Uint8Array(memory.buffer, output_ptr(), 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);