@microflash/rehype-figure

2.1.0 • Public • Published

rehype-figure

npm regression license

rehype plugin to transform an image with alt text to a figure with caption

Status: feature complete

[!IMPORTANT] Converting an image with alt text to a figure with caption is an escape hatch. Alt text, title, and captions have different intended purposes, and you should eventually enhance your content to adopt them.

What's this?

This package is a unified (rehype) plugin that takes an image node with alt text (e.g., ![Alt text](path-to-image.jpg)) and converts it to a figure element with caption.

<figure>
  <img src="path-to-image.jpg" alt="Alt text">
  <figcaption>Alt Text</figcaption>
</figure>

Install

This package is ESM only.

In Node.js (16.0+), install with npm:

npm install @microflash/rehype-figure

For Node.js versions below 16.0, stick to 1.x.x versions of this plugin.

In Deno, with esm.sh:

import rehypeFigure from "https://esm.sh/@microflash/rehype-figure";

In browsers, with esm.sh:

<script type="module">
  import rehypeFigure from "https://esm.sh/@microflash/rehype-figure?bundle";
</script>

Use

Say we have the following module example.js:

import { unified } from "unified";
import remarkParse from "remark-parse";
import remarkGfm from "remark-gfm";
import remarkRehype from "remark-rehype";
import rehypeFigure from "@microflash/rehype-figure";
import rehypeStringify from "rehype-stringify";

main()

async function main() {
  const file = await unified()
    .use(remarkParse)
    .use(remarkGfm)
    .use(remarkRehype)
    .use(rehypeFigure)
    .use(rehypeStringify)
    .process("![Alt text](path-to-image.jpg)");

  console.log(String(file));
}

Running that with node example.js yields:

<figure>
  <img src="path-to-image.jpg" alt="Alt Text">
  <figcaption>Alt Text</figcaption>
</figure>

API

The default export is rehypeFigure.

The following options are available. All of them are optional.

  • className: class for the wrapped figure element

By default, no classes are added to the figure element.

License

MIT

Package Sidebar

Install

npm i @microflash/rehype-figure

Weekly Downloads

2,587

Version

2.1.0

License

MIT

Unpacked Size

6.79 kB

Total Files

4

Last publish

Collaborators

  • naiyer