Syntax Highlighting in MDX

Posted by Ryan Abney - 17 Jan 2020 - 1 min read

Syntax highlighting was something I took for granted. For some reason I was assuming that markdown/mdx would let you do it by default. That's not the case, but luckily there's a way to quickly set up syntax highlighting in Gatsby by using gatsby-remark-embedder.

Here's a link on Egghead.io to a great tutorial by Chris Biscardi.

let's do some syntax highlighting in gatsby

Here's some CSS

body {
  font-size: 16px;
  color: #fff;
  background-color: #000;
}

now a javascript one

let foo = bar
const sum = (a, b) => a + b