See what's launched

The next gen Gatsby is here Performance, developer velocity, and scaling to meet Enterprise needs - See what’s launched

Sign Up for Free
Community Plugin
View plugin on GitHub


Package Version Build Status Code Coverage MIT licensed

transforms: ![image with description](path-to-image.jpg) into:

  <img src="path-to-image.jpg">
  <figcaption>image with description</figcaption>


npm install --save gatsby-remark-figure-caption

How to use

// In your gatsby-config.js
plugins: [
    resolve: `gatsby-transformer-remark`,
    options: {
      plugins: [
          resolve: `gatsby-remark-figure-caption`,
          options: {figureClassName: 'md-figure'},


Name Default Description
figureClassName '' class for the wrapper figure element
imageClassName '' class for the wrapped img element
captionClassName '' class for the wrapped figcaption element


only tested with gatsby v2, it may work on v1.

not really a good thing a11y-wise:

PRs welcome.

© 2022 Gatsby, Inc.