MDX Plugins

Gatsby remark plugins
remark plugins

Gatsby remark plugins

gatsby-mdx is compatible with all of the gatsby-remark plugins, including gatsby-remark-images.

To enable gatsby-remark-images, you first need to install the relevant image plugins:

yarn add gatsby-plugin-sharp gatsby-remark-images

If you don’t have gatsby-source-filesystem installed, also install that.

Then configure the plugins. gatsby-source-filesystem needs to be pointed at wherever you have your images on disk, gatsby-remark-images needs to be a sub-plugin of gatsby-mdx, and gatsby-plugin-sharp can be included on its own.

module.exports = {
  plugins: [
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 1035,
              sizeByPixelDensity: true,
            },
          },
        ],
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/pages`,
      },
    },
  ],
}

Then, any image in your MDX file will be automatically handled by Gatsby image processing.

![my image](./my-awesome-image.png)

remark plugins

You can use remark plugins directly if there are transformations you’d like to make on your MDX documents. This can do anything from adding emoji support to enforcing a particular title capitalization format.

const capitalize = require(`remark-capitalize`)
const emoji = require(`remark-emoji`)

module.exports = {
  plugins: [
    {
      resolve: `gatsby-mdx`,
      options: {
        mdPlugins: [capitalize, emoji],
      },
    },
  ],
}

Edit this page on GitHub

MDX Plugins

Table of contents

Gatsby remark plugins

remark plugins