MDX and custom components

MDX is an extension to Markdown that lets you include JSX in Markdown documents.

You can find so many posts on the internet to help understand the basic concepts and usage in a Gatsbyjs project.

Some official tutorials:

• MDX | Gatsby
• Writing Pages in MDX | Gatsby

Using with gatsby-theme-kb

Here is an example of using custom components in this demo. Check the latest code on github.

File structure:

demo/examples
├── mdx-components
│   └── FakeClock.tsx
├── mdx.mdx

In your .mdx file:

import FakeClock from "./mdx-components/FakeClock.tsx"

<FakeClock />

The result:

A fake clock: 1:9:35