# 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
of WebAssembly.
## CommonMark 0.31.2
This QIP component is just CommonMark 0.31.2 in
of WebAssembly.
## Download
- gfm-commonmark.0.31.2.wasm —
- commonmark.0.31.2.wasm —
## CLI
```bash
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
```js
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);
```