couldnt get this to work

[zilahir]

Hey,

sorry for bothering. :) Not sure what am I misising here, but i simpy couldnt get this to work.

I have added the plugin into gatsby-config as always.

plugins: [
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          `gatsby-remark-reading-time`,
          {
            resolve: `gatsby-remark-highlight-code`
          }
        ],
      }
    },
...

Then in the layout (but tried in the component also which is consuming the content, no success there either):

class Layout extends React.Component {
constructor(props) {
    super(props);
    deckDeckGoHighlightElement()
  }
render() { ... }
}

My content is in markdown files, for example:

const ShoppingList = new Schema({
  createdAt: String,
  isFullFilled: Boolean,
  id: String,
  items: [{
    type: mongoose.Schema.Types.ObjectId,
    ref: 'Product'
  }]
})

But, nothing.

There is no error thrown, or anything.

The result is:

Any idea which direction should I go to debug this? Thank you!

[peterpeterparker]

Did you install all dependencies and did you load the component as described in the documentation / README?

If yes, when you debug your site with the Chrome Debugger, are the <deckgo-higlight-code/> hydrated?

[zilahir]

Hi! Thanks for the reply.

Yes, I have installed everything, and loading the component too. (Even provided that in my example. It's placed in the constructor. )

And no, the <deckgo-higlight-code/> is not hydrated.

[peterpeterparker]

Can you try loading the component "outside" the constructor?

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

As for example in my website: https://github.com/peterpeterparker/daviddalbusco.com/blob/67aba9bd765b6a6455fc3063e97059bd46c7e871/src/components/layout/layout.js#L29

[zilahir]

I have moved it out, placed to different files (Layout, Page), still no success. It seems like the plugin is being ignored completely. Weird.

[peterpeterparker]

Can you share your project or create a minimal reproducible repo?

[zilahir]

sure thing, here's the repo

[peterpeterparker]

Thx. I cannot install the dependencies locally, there is an error but not related to this issue, therefore cannot test.

Where do you load the component? I cannot find the above displayed code in your branch.

This:

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

is missing.

[zilahir]

No, it's not! It's there

[peterpeterparker]

I was able to install the dependencies after removing package-lock.json and therefore was able to debug.

You've got conflicts in your configuration.

gatsby-transformer-remark is declared twice. In addition, the gatsby-remark-prismjs is use to parse your block of code, not this plugin.

remove gatsby-remark-prismjs and merge the gatsby-transformer-remark to solve the issue.

{
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 590,
              linkImagesToOriginal: true
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 1.0725rem`,
            },
          },
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
          `gatsby-remark-reading-time`,
          {
            resolve: `gatsby-remark-highlight-code`
          }
        ],
      },
    },

Have fun!

[zilahir]

god! sorry, i overlook that like several times. thank you!

[peterpeterparker]

no worries, happens to me too, specially on Sunday evening 😉
thanks for giving a try to this plugin!