Package Exports

@microflash/remark-figure-caption
@microflash/remark-figure-caption/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@microflash/remark-figure-caption) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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.

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

@microflash/remark-figure-caption