markdown-it-header-sections

Demo of markdown-it-header-sections.

by Arve Seljebu

HTML

<script src="https://wzrd.in/standalone/markdown-it@latest"></script>
<script src="https://wzrd.in/standalone/markdown-it-attrs@latest"></script>
<script src="https://wzrd.in/standalone/markdown-it-header-sections@latest"></script>
<pre id="root">
</pre>

Babel + JSX

const md = markdownIt();

md.use(markdownItAttrs).use(markdownItHeaderSections);

const src = `# great stuff {.jumbotron}
lorem

## section 2
click me {.btn .btn-default}`;

// render
let res = md.render(src);

// pretty print
res = res.replace(/\>\n/g, '>\n\n');
res = res.replace(/\>\</g, '>\n<');
res = res.replace(/\</g, '&lt;');
res = res.replace(/\>/g, '&gt;');

// print to viewing window
document.getElementById("root").innerHTML = res;