Gastsby Cartbon Theme replace the TOC block.

[eliooses-zondax]

Hi there!, I have followed all the instructions of the README.md file, but I have the following problem:

The following snippet:

Into a Gatsby Carbon Theme project render like this way (a Gatsby Carbon Theme pre code block):

This is because the Carbon remarker overrides the block above the directive of this gatsby-remark-table-of-contents plugin. I have tried different commands and settings in the gatsby-config.js file but all to no avail.

I understand that many starterts and themes must go through the same situation, so I believe that a solution must be found. My knowledge is limited but I can help by testing a solution/workaround that comes to mind since I need to solve this in some way in the short term. Thank you in advance.

[eliooses-zondax]

Reading, I find that Carbon Theme uses prism-react-renderer, and that they have prepared a language none to avoid highlighting, I have tried with that and even so the conversion to the code block is not avoided. For this reason I just open an issue in https://github.com/FormidableLabs/prism-react-renderer/issues/99 but if we can just find a solution from this side...

[signalwerk]

@eliooses-zondax thank you for your report. do you have a github-repo for me, where I can see the problem in action?

[eliooses-zondax]

Hi @signalwerk thanks a lot for your time.

For legal reasons i can´t share my actual REPO but i share with you this one (Gatsby Carbon Theme Starter + gatsby-remark-table-of-contents plugin installed + page with toc snippet): https://github.com/eliooses-zondax/gatsby-remark-table-of-contents-issues-12

Run:

git clone https://github.com/eliooses-zondax/gatsby-remark-table-of-contents-issues-12.git yarn yarn dev:clean

And go to:

http://localhost:8000/guides/MDX

Of course I am here to help you with whatever you need to solve this. Just let me know.

[lamcgregor]

For anyone coming here, I had a similar issue using 'gatsby-plugin-mdx', 'gatsby-remark-prismjs', 'gatsby-remark-autolink-headers'. The block was being converted into a styled <pre> block before gatsby-remark-table-of-contents got to it.

Turns out the order of plugins matters, changing:

    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        gatsbyRemarkPlugins: [
          'gatsby-remark-prismjs',
          'gatsby-remark-autolink-headers',
          {
            resolve: 'gatsby-remark-table-of-contents',
            options: {
              exclude: 'Table of Contents',
              fromHeading: 2,
              toHeading: 6,
              className: 'table-of-contents',
              ordered: true,
            },
          },
        ],
      },
    },

to:

    {
      resolve: 'gatsby-plugin-mdx',
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: 'gatsby-remark-table-of-contents',
            options: {
              exclude: 'Table of Contents',
              fromHeading: 2,
              toHeading: 6,
              className: 'table-of-contents',
              ordered: true,
            },
          },
          'gatsby-remark-prismjs',
          'gatsby-remark-autolink-headers',
        ],
      },
    },

Fixes it, so just use the gatsby-remark-table-of-contents plugin first before prism js. I understand that the original issue was about Gatsby's carbon theme which I did not fix. But it was the same symptoms so I hope this helps someone