Vijay Menon | Portfolio

Syntax Highlighting

March 31, 2020

← Back

Using Gatsby Remark Highlight Code

Update: This blog now uses Gatsby Plugin MDX with Prism React Renderer. Here's a link to an article that helped me set all that up. Leaving the blog in its original format for archive reasons.

So today I wanted to also add syntax highlighting to my new blog. Since this site is powered by Gatsby, I looked up any solutions there first -- since Gatsby has a pretty good ecosystem for plugins.

I found this one: https://www.gatsbyjs.com/plugins/gatsby-remark-highlight-code/. Instructions seem pretty straight-forward, so just to test it's working, I'll post a random code snippet and see if the configuration I just did to install the plugin works, and that the code below gets syntax highlighted.

const capitalizeFirstLetters = (text) => {
  return text
    .split(" ")
    .map((word) => word.substr(0, 1).toUpperCase() + word.substr(1))
    .join(" ");
};
capitalizeFirstLetters("za warudo, toki wo tomare!"); //jojo reference
Copyright © 2021, Vijay Menon