Testing MDX

1 minutes to read
learninggatsbymdx

Moving to the new hotness!!

I’ve now moved this blog over to Gatsby MDX. You can see all the changes on my repo here.

From the pull I’m hoping you can glean that the majority of the work is in replacing gatsby-transformer-remark with gatsby-mdx, there are some additional files added, that pretty nifty Code.js component from LekoArts minimal starter blog, and the wrap-root-element.js module for (I think) the MDX rendering of the code.

Files changed:

  • gatsby-browser.js
  • gatsby-config.js
  • gatsby-node.js
  • gatsby-ssr.js
  • src/pages/index.js
  • src/templates/blogPostTemplate.js

Files added:

  • src/components/Code.js
  • wrap-root-element.js

Shout out to LekoArts, HagNerd and Chris Biscardi for their example repositories:

Things I still haven’t figured out

Code blocks

Code blocks are pretty, this is a js block with the prism-react-renderer/themes/nightOwl theme:

const onClick = () => {
alert('clicked')
}
render(<button onClick={onClick}>Click Me!</button>)

And here is a js react-live block, try editing the code:

Image for prosperity 👍

Mdx is a bit slow

Sometimes renders don’t update

Not working yet

  • [ ] Autolink headers
  • [ ] Embed tweets
  • [ ] Embed videos
a cheeky butt

Sign up for the newsletter

Want to keep up to date with what I'm working on?

Important dev related content, directly to your inbox (for free).

I care about the protection of your data. Read my Privacy Policy.