remark-figure-caption

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

Status: legacy

This package is no longer recommended for use. It’s still covered by semantic-versioning guarantees and not yet deprecated, but use of this package should be avoided. Please use remark-rehype to move from remark (markdown) to rehype (HTML) and then replace remark-figure-caption with rehype-figure.

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](path-to-image.jpg)) and converts them to figure elements with captions.

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

Install

This package is ESM only.

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

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:

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

In browsers, with esm.sh:

<script type="module">
  import remarkFigureCaption from "https://esm.sh/@microflash/remark-figure-caption?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 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](path-to-image.jpg)");

  console.log(String(file));
}

Running that with node example.js yields:

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

API

The default export is remarkFigureCaption.

Options

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