rehype-figure

rehype plugins to support figure and caption!

Install

npm install rehype-figure

or

yarn add rehype-figure

Use

Markdown:

# Images

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

![This is a caption and image alt property](https://img.id/dog.png)
![These two images will be children 'rehype-container'](https://img.id/cat.png)

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua

![These two images will be children 'rehype-container'](https://img.id/cat.png)

rehype-figure:

const unified = require("unified")
const remark = require("remark-parse")
const remark2rehype = require("remark-rehype")
const stringify = require("rehype-stringify")
const assert = require("assert")
const vfile = require("to-vfile")

const rehypeFigure = require("rehype-figure")

function compile(filename) {
  return unified()
    .use(remark)
    .use(remark2rehype)
    .use(rehypeFigure, { className: "my-figure" })
    .use(stringify)
    .processSync(vfile.readSync("./__example__/" + filename))
    .toString()
}

Yields:

<h1>Images</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua
</p>
<div class="my-figure-container">
  <figure class="my-figure">
    <img
      src="https://img.id/dog.png"
      alt="This is a caption and image alt property"
    />
    <figcaption>This is a caption and image alt property</figcaption>
  </figure>
  <figure class="my-figure">
    <img
      src="https://img.id/cat.png"
      alt="These two images will be children 'rehype-container'"
    />
    <figcaption>
      These two images will be children 'rehype-container'
    </figcaption>
  </figure>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  tempor incididunt ut labore et dolore magna aliqua
</p>
<figure class="my-figure">
  <img
    src="https://img.id/cat.png"
    alt="These two images will be children 'rehype-container'"
  />
  <figcaption>These two images will be children 'rehype-container'</figcaption>
</figure>