🛠️ How to convert an existing Gatsby Markdown blog to use MDX
- Convert Gatsby blog to use MDX blog posts
- My Pull Requests
MDX is often called the markdown for the component era. It is a file format that lets you write JSX in a Markdown document.
If you are building a React/JSX-based project, where everything is a component, you can use and existing component inside your MDX file.
You can integrate MDX with Next.js, Gatsby, Create React App, React Static, Webpack, Parcel, and Zero. In this case, I'm going to show you how I integrated MDX with my personal Gatsby blog.
Add MDX to your Gatsby Blog
And for those who already have a blog and want to touch the awesomness of mdx, I will cover in details how to convert your markdown blog to mdx, let's go.
Check out files in this repo as an example
In order to use MDX with Gatsby, you need to install the official plugin
gatsby-plugin-mdx, in addition to
1npm install --save gatsby-plugin-mdx @mdx-js/mdx @mdx-js/react
gatsby-config.js file, replace
1- resolve: `gatsby-transformer-remark`,2+ resolve: `gatsby-plugin-mdx`,
1- plugins: [2+ gatsbyRemarkPlugins: [