remark-figure-caption


remark plugin to transform images with alt text to figures with captions

Status: Feature complete

This plugin is feature complete. Compatibility updates and patches will be published in future.

Contents

- What's this?
- Install
- Use
- API
- Options
- Credits
- License

What's this?

This package is a unified (remark) plugin that takes the image nodes with alt text (e.g., !Alt text) and converts them to figure elements with captions.

``html








`

Install

This package is ESM only.

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

`sh
npm install @microflash/remark-figure-caption
`

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

In Deno, with esm.sh:

`js
import remarkFigureCaption from "https://esm.sh/@microflash/remark-figure-caption";
`

In browsers, with esm.sh:

`html

`

Use

Say we have the following module example.js:

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

main()

async function main() {
const file = await unified()
.use(remarkParse)
.use(remarkGfm)
.use(remarkFigureCaption)
.use(remarkRehype)
.use(rehypeStringify)
.process("!Alt text");

console.log(String(file));
}
`

Running that with node example.js yields:

`html








`

API

The default export is remarkFigureCaption.

$3

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

- figureClassName: class for the wrapped figure element
- imageClassName: class for the wrapped img element
- captionClassName: class for the wrapped figcaption element

By default, no classes are added to the figure, img and figcaption` elements.

Credits

Quang Trinh who wrote the original plugin. This is a direct ESM-only port.

License

MIT