After I posted about how I set up the 👀 contentful preview api with gatsby + netlify, I got some positive feedback and some questions about the syntax highlighting on my blog. Luckily I was already working on a post to discuss exactly that, so I'll walk you through how I set it up.

gatsby-remark-prismjs

I really had no clue where to start. So a quick search for gatsby syntax highlighting pulled up Prism. It turned out Gatsby already had a plugin for that! I installed the package with npm i gatsby-remark-prismjs, then added an option under the remark plugin that I already had installed.

// gatsby-config.js
 
{
    resolve: "gatsby-transformer-remark",
    options: {
        plugins: [
              {
                  resolve: "gatsby-remark-prismjs",
              },
        ],
    },
},

Next I had to actually style the code. So I browsed Prism's themes and picked out prism-funky. I copied the file into my project and made some modifications to the colors and background. In order for Prism to pick up the styles, I had to import the CSS file anywhere code would be displayed, like in my <PostBody/> component.

// components/PostBody.jsx
 
// styles
import "../scss/PostBody.scss"
import "../scss/PrismFunky.scss"

And that was it, just a few lines of code changes to produce the awesome code blocks you're seeing now!

not sexy enough

I'm still missing one key feature when it comes to syntax highlighting, line numbers. My attempts to get that working in conjuction with line highlighting have been unsuccessful so far, but I'll figure it out eventually.

While my current syntax highlighting theme is pretty sweet, it's not sexy enough. I've got plans to create my own theme for Visual Studio Code and use the same colors on this blog. When I get around to working on it, you can find it here.

Thanks for following along and tweet me your themes @bradgarropy!