A remark plugin to transform images or code blocks followed by blockquotes into figures with captions.
npm install remark-figure-caption
This plugin can be used with the unified ecosystem, specifically with remark for Markdown processing.
import {unified} from 'unified'
import remarkParse from 'remark-parse'
import remarkFigureCaption from 'remark-figure-caption'
import remarkRehype from 'remark-rehype'
import rehypeStringify from 'rehype-stringify'
const processor = unified()
.use(remarkParse)
.use(remarkFigureCaption)
.use(remarkRehype)
.use(rehypeStringify)
const markdown = `
![Image alt text](image.jpg)
> This is the caption for the image.
\`\`\`js
console.log('Hello World');
\`\`\`
> This is a code caption.
`
processor.process(markdown).then((file) => {
console.log(String(file))
})
This plugin transforms:
- An image immediately followed by a blockquote
- A code block immediately followed by a blockquote
Into a <figure>
element containing the image or code block, with the blockquote content as a <figcaption>
.
![Image alt text](image.jpg)
> This is the caption for the image.
\`\`\`js
console.log('Hello World');
\`\`\`
> This is a code caption.
<figure>
<img src="image.jpg" alt="Image alt text">
<figcaption>This is the caption for the image.</figcaption>
</figure>
<figure>
<pre><code class="language-js">console.log('Hello World');</code></pre>
<figcaption>This is a code caption.</figcaption>
</figure>
MIT
Contributions, issues, and feature requests are welcome!