Adding new languages to prism-react-renderer - Gatsby

C# is probably the best language that a human being can touch in his life. Alright ...

Gatsby is so nice and so damn powerful. This blog is built on it. Yes, I'm not kidding. I used this wonderful theme, fully equipped with a myriad of plugins.

One, only one little problem. Csharp language is not natively supported by prism-react-renderer. Yes, I know, such a shame. There is a clike language tag that could have done the job, but here we are doing things right.

It's actually quite easy to activate.

First, install the prismjs dependency

npm install prismjs
 
yarn add prismjs

Second, add a new file gatsby-browser.js in the root folder, next to your gatsby-config

import Prism from "prism-react-renderer/prism";
(typeof global !== "undefined" ? global : window).Prism = Prism;
require("prismjs/components/prism-csharp");

Almost done. Next part is not necessary, it's just adding little language tab at the top left of the code block. Since we are try harders, we will do it.

We'll need to shadow one file. code.ts.

This feature allows users to replace a file in the src directory that is included in the webpack bundle with their own implementation.

This should be the location of the file in your project

src/@lekoarts/gatsby-theme-minimal-blog/styles/code.ts

Add this part to the existing content of code.ts.

'pre[class~="language-csharp"]:before': {
    content: `"csharp"`,
    background: `#61dafb`,
    color: `black`,
},

And voilà.

Console.WriteLine("Hello from csharp");

PS: language tag is csharp