Adding Components to Markdown with MDX

In the previous section, we saw that Gatsby recipes are written with JSX elements interpolated into Markdown files. But what are these elements, and how is it possible to write JSX elements directly within Markdown? The answer lies in MDX.

MDX is an extension to the Markdown format that allows Markdown and JSX users to interpolate JSX elements into Markdown documents, making it possible to add React components into Gatsby blog posts and pages. Markdown already has certain HTML elements available out of the box and supports inline HTML—but MDX takes this a step further by allowing developers to insert JSX directly into their Markdown documents.