Skip Navigation

Scott Spence

Testing MDX

1 min read
Hey! Thanks for stopping by! Just a word of warning, this post is about 5 years old, wow! If there's technical information in here it's more than likely out of date.

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 = () => {
render(<button onClick={onClick}>Click Me!</button>)

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

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

Image for prosperity 👍


Mdx is a bit slow

Sometimes renders don’t update

Not working yet

  • Autolink headers
  • Embed tweets
  • Embed videos

There's a reactions leaderboard you can check out too.

Copyright © 2017 - 2024 - All rights reserved Scott Spence