markdown-it-img-wrapper

This changes the behavior of MarkdownIt to wrap standalone images in figures instead of paragraphs.

lorem ipsum...

![A picture.](./picture.jpg)

lorem ipsum...

<!-- Becomes -->

<p>lorem ipsum...</p>
<figure>
  <img alt="A picture." src="./picture.jpg">
</figure>
<p>lorem ipsum...</p>

In addition, if you provide a title attribute on the image, it will become a caption on the figure instead.

lorem ipsum...

![A picture.](./picture.jpg "Picture!")

lorem ipsum...

<!-- Becomes -->

<p>lorem ipsum...</p>
<figure>
  <img alt="A picture." src="./picture.jpg">
  <figcaption>Picture!</figcaption>
</figure>
<p>lorem ipsum...</p>

Installation

Install markdown-it-img-wrapper from npm with your favorite package manager.

Usage

import MarkdownIt from "markdown-it";
import imgWrapperPlugin from "markdown-it-img-wrapper";

const md = MarkdownIt();
md.use(imgWrapperPlugin);

const html = md.render('![](test.jpg)');

console.log(html); // <figure><img src="test.jpg" alt=""></figure>

Why Would I Need This?

By default, MarkdownIt wraps images inside of paragraphs even if they're the only thing on a line. That's compliant with the spec the project follows. To change that behavior, a plugin is necessary.

What if I Want Options?

This plugin is simple and opinionated. If you would like something similar but with more options and control over the transformation, markdown-it-implicit-figures is a good alternative.