remark-figure-caption
Version:
A remark plugin to wrap images with next line blockquote in figure elements with captions.
89 lines (60 loc) • 1.9 kB
Markdown
A remark plugin to transform images or code blocks followed by blockquotes into figures with captions.
```bash
npm install remark-figure-caption
```
This plugin can be used with the [unified](https://github.com/unifiedjs/unified) ecosystem, specifically with [remark](https://github.com/remarkjs/remark) for Markdown processing.
```javascript
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 = `
> 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:
1. An image immediately followed by a blockquote
2. 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>`.
```markdown
> This is the caption for the image.
\`\`\`js
console.log('Hello World');
\`\`\`
> This is a code caption.
```
```html
<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!