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 trasnform images with alt text to figures with captions

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 (version 12.20+, 14.14+, or 16.0+), install with npm:

npm install @microflash/remark-figure-caption

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

Credits

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

License

MIT

@microflash/remark-figure-caption