rehype-image-caption

rehype plugin to set captions for images in addition to alt text.

Installation

npm install rehype-image-caption

Example

import remarkParse from "remark-parse";
import rehypeStringify from "rehype-stringify";
import remarkRehype from "remark-rehype";
import { unified } from "unified";
import rehypeImageCaption from "rehype-image-caption";

const processor = unified()
    .use(remarkParse)
    .use(remarkRehype)
    .use(rehypeImageCaption)
    .use(rehypeStringify);

const markdown = `
![alt text](image.jpg)

![alt text](image.jpg)*caption text*

![alt text](image.jpg)
*caption text*
`;

processor.process(markdown).then((result) => {
    console.log(result.toString());
});

The above code will output the following:

<figure>
    <img src="image.jpg" alt="alt text">
</figure>
<figure>
    <img src="image.jpg" alt="alt text">
    <figcaption>caption text</figcaption>
</figure>
<figure>
    <img src="image.jpg" alt="alt text">
    <figcaption>caption text</figcaption>
</figure>

Development

Build

npm run build

Format

npm run format

or

npm run format:check

Lint

npm run lint

Test

npm run test

Pull Requests

This repository uses Changesets to manage versioning and releases. When creating a pull request, please run the Changesets CLI and commit the changeset file.

npx changeset