Skip to main content

MDX Plugins

Gatsby remark plugins

gatsby-plugin-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 both a sub-plugin of gatsby-plugin-mdxand a string entry in the plugins array, and gatsby-plugin-sharp can be included on its own.

module.exports = {
plugins: [
`gatsby-plugin-sharp`,
`gatsby-remark-images`,
{
resolve: `gatsby-plugin-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-plugin-mdx`,
options: {
remarkPlugins: [capitalize, emoji],
},
},
],
}

Edit this page on GitHub
Docs
Tutorials
Plugins
Blog
Showcase