markdown-it-implicit-figures

Demo of markdown-it-implicit-figures.

by Arve Seljebu

HTML

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

Babel + JSX

const md = markdownIt();
const implicitFigures = markdownItImplicitFigures;

md.use(implicitFigures, {
  dataType: false,  // <figure data-type="image">
  figcaption: true  // <figcaption>alternative text</figcaption>
});

const src = `text with ![](img.png)

![](fig.png)

another paragraph`;

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

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

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