Plugin doesnt work in gatsby v5

[harikrishkk]

I was creating a coding blog website and wanted to integrate this highlight plugin. I tried the steps mentioned in the plugin's GitHub documentation. I tried this on a sample hello world first before integrating this into a full-blown one.

I already had gatsby-plugin-mdx installed, so was not looking to install the gatsby-transformer-remark just for this one. A hello world implementation on a sample gatsby site would have helped people a lot. While the plugin looks awesome, the documentation could equal that with a few live working docs.

I was able to get the same working with gatsby-remark-prismjs but was curious about using this plugin instead.

Here is a hello world gatsby v5 website which I am trying to integrate this plugin.

Steps already tried:

install npm install --save gatsby-transformer-remark gatsby-remark-highlight-code @deckdeckgo/highlight-code

add the same in gatsby config

// In your gatsby-config.js
plugins: [
  {
    resolve: `gatsby-plugin-mdx`,
    options: {
      extensions: [".mdx", ".md"],
      gatsbyRemarkPlugins: [
        {
          resolve: `gatsby-remark-highlight-code`,
        },
      ],
    },
  },
];

Tried loading this in index.js, components

import { defineCustomElements as deckDeckGoHighlightElement } from "@deckdeckgo/highlight-code/dist/loader";
deckDeckGoHighlightElement();

Any pointers help!

Thanks in advance, Hari

[princefishthrower]

@harikrishkk - for what its worth, this following method still works today (i'm on gatsby 5.7.0): https://levelup.gitconnected.com/syntax-highlighting-in-gatsby-mdx-f0187ce51f4f

[peterpeterparker]

If anyone want to provide a PR to make the plugin work with Gatsby 5, happy to merge it.

I myself do not use Gatsby anymore, therefore do not really need to improve this plugin.