Published on

Using Shades of Purple for Syntax Highlighting in Gatsby

Authors
  • avatar
    Name
    Saqib Ameen
    Twitter

I recently wrote about deploying Python scripts with cron jobs on Heroku. In the post, I had to share a couple of code snippets. I was using Gatsby Starter Theme and I realized that the syntax highlighting was not that pretty. At least not the way I wanted.

Default Gatsby Syntax Highlighting

I use Shades of Purple for iTerm and VSCode. So, I thought of adding syntax highlighting. Coz why not!

I decided to write about it, just in case if you are looking to use some syntax highlighting theme in your Gatsby blog. Below is a preview of what we are going to achieve. Pretty cool!! Right!?

Default Gatsby Syntax Highlighting

Syntax Highlighting in Gatsby

I used PrismJS for syntax highlighting in Gatsby. After that I set the theme and it was all set! So, basically we need to achieve two things:

  1. Install PrismJS
  2. Setting Shades of Purple Theme

Installing PrismJS

Gatsby plugins ecosystem has grown tremendously and you can pretty much find plugins for everything. So, for PrismJS also, we are going to use its Gatsby plugin along with a few supporting plugins.

To install the plugins, run the following command in your Gatsby project directory:

$ npm install --save gatsby-transformer-remark gatsby-remark-prismjs prismjs

After installation, next step is to configure the plugin in your gatsby-config.js file. So, go to the file and paste the following settings:

resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
            {
          resolve: `gatsby-remark-prismjs`,
          options: {
            aliases:{sh: "bash", js:"javascript"},
            showLineNumbers: false,
          }
        }],
      },

That's all you need to do in order to setup your PrismJS. The next step is to setup the theme.

Setting Shades of Purple Theme

In order to set the theme, go to your gatsby-browser.js file. To set the theme, we need the .CSS file for Shades of Purple. You can grab it from this CodePen.

Save it in somewhere in src folder or maybe in static folder of your Gatsby project. Let's call it shades-of-purple.css. Now, import the css file in your gatsby-browser.js file. For me it looks like something this:

import './src/theme/shades-of-purple.css'

Open your post containing code block and you're all set to rock the incredible Shades of Purple Theme. 🤞

/**
 * Sort the numbers in ascending order.
 */

let numbers = [4, 2, 5, 1, 3]

// Sort the elements in place.
numbers.sort((a, b) => a - b)

console.log(numbers)
// [1, 2, 3, 4, 5]

Update: I have migrated my blog from Gatsby to Next.js so you might not see the highlighting here.

Which code highlighting theme do you use? Have you tried Shades of Purple? Also, if you have any questions, feel free to reach out.

Peace! ✌️