[gatsby-theme-minimal-blog] : How to add a new language to be highlighted in code-blocks?

Thank you for this great work and excellent theme.

Summary

I would like to use additional language support for syntax highlighting , for example HashiCorp Language (hcl) and Powershell… both of which are supported in prismjs., however I am not sure how could i bring this highlight support into my deployment.

Steps that I performed so far.

1. Shadowed the file code.ts to my-site/src/@lekoarts/gatsby-theme-minimal-blog/styles/code.ts and added the following section

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

I could notice the HCL text appear on the codeblock however I see no highlighting/coloring of the syntax

1. I also attempted to shadow the file my-site/src/@lekoarts/gatsby-theme-minimal-blog/types.d.ts and added the languages hcl and powershell

export type Language =
  | "markup"
  | "bash"
.
.
.
  | "yaml"
  | "hcl"
  | "powershell"

I do not notice any effect from the above when i run gatsby develop

1. Attempted to shadow src/@lekoarts/gatsby-theme-minimal-blog/components/code.tsx and copied the content from node_modules however I recieve error when gatsby develop as i suspect .tsx shadow is not well taken by gatsby

Please advise a procedure on how to achieve this, I am not a developer by nature so more information/step-by-step (referral links) would help.

Relevant information

Theme

gatsby-theme-minimal-blog

Environment (if relevant)

  System:
    OS: Linux 4.19 Debian GNU/Linux 10 (buster) 10 (buster)
    CPU: (1) x64 Intel(R) Core(TM) i5-8365U CPU @ 1.60GHz
    Shell: 5.0.3 - /bin/bash
  Binaries:
    Node: 14.15.3 - ~/.nvm/versions/node/v14.15.3/bin/node
    npm: 6.14.9 - ~/.nvm/versions/node/v14.15.3/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  npmPackages:
    gatsby: ^2.25.3 => 2.29.3
    gatsby-plugin-google-analytics: ^2.4.1 => 2.8.0
    gatsby-plugin-google-fonts: ^1.0.1 => 1.0.1
    gatsby-plugin-manifest: ^2.5.2 => 2.9.1
    gatsby-plugin-netlify: ^2.4.0 => 2.8.0
    gatsby-plugin-offline: ^3.3.3 => 3.7.1
    gatsby-plugin-sitemap: ^2.5.1 => 2.9.0
    gatsby-plugin-webpack-bundle-analyser-v2: ^1.1.13 => 1.1.18
  npmGlobalPackages:
    gatsby-cli: 2.16.2

File contents (no particular changes)

[hurricanehrndz]

@gitkalz

You can also add the following snippet to gatsby-browser.js

import Prism from "prism-react-renderer/prism";
import nixLang from "refractor/lang/nix";
nixLang(Prism);

[ayhon]

You can also add the following snippet to gatsby-browser.js

import Prism from "prism-react-renderer/prism";
import nixLang from "refractor/lang/nix";
nixLang(Prism);

The solution from @hurricanehrndz works for me, but if I try to add another language, suddenly my site doesn’t load anymore. I have no idea why this is, but how could I add more than one language?

This is what I tried

import Prism from "prism-react-renderer/prism";

// Available completions https://github.com/wooorm/refractor/tree/main/lang
import haskell from "refractor/lang/haskell";
import cpp from "refractor/lang/cpp";

haskell(Prism);
cpp(Prism);