remark plugin to add images with alt text to figures with captions
npm install @microflash/remark-figure-caption


remark plugin to transform images with alt text to figures with captions
This plugin is feature complete. Compatibility updates and patches will be published in future.
- What's this?
- Install
- Use
- API
- Options
- Credits
- License
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`

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`
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`

The default export is remarkFigureCaption.
The following options are available. All of them are optional.
- figureClassName: class for the wrapped figure elementimageClassName
- : class for the wrapped img elementcaptionClassName
- : class for the wrapped figcaption element
By default, no classes are added to the figure, img and figcaption` elements.
Quang Trinh who wrote the original plugin. This is a direct ESM-only port.