Skip Navigation

Scott Spence

Testing MDX

1 min read

1 person viewing this page live

Read to the end of the post for more stats

Hey! Thanks for stopping by! Just a word of warning, this post is over 4 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 = () => {
  alert('clicked')
}
render(<button onClick={onClick}>Click Me!</button>)

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

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

Image for prosperity 👍

highlightVLive

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.

Analytics Information

Yearly analytics for this post

Views This Year
10
Jan 1, 2023 - Dec 3, 2023
Visitors This Year
4
Jan 1, 2023 - Dec 3, 2023
Entries This Year
4
Jan 1, 2023 - Dec 3, 2023

Copyright © 2017 - 2023 - All rights reserved Scott Spence