Using Shades of Purple for Syntax Highlighting in Gatsby
September 23, 2019
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.
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!?
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:
- Install PrismJS
- Setting Shades of Purple Theme
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:
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:
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]
Which code highlighting theme do you use? Have you tried Shades of Purple? Also, if you have any questions, feel free to reach out.
Blog by Saqib Ameen
Love crafting web, writing, open source, and travelling.