gatsby-plugin-mdx with prismjs and MDXRenderer, how?

Created on 3 Sep 2019 · 6Comments · Source: gatsbyjs/gatsby

Recently updated from gatsby-mdx to gatsby-plugin-mdx and following the starter theme structure
https://github.com/gatsbyjs/gatsby/blob/master/themes/gatsby-theme-blog-core/gatsby-config.js

I'm trying to use prismjs as I was doing before without issues and now I see that the code is not parsed, the mdx code appears within <pre><code> tags but the content is unparsed and without the wrapper <div class="gatsby-highlight">

(code in mdx as usual)

```js
 const code = () => <>whatever</>
```

How can I use gatsby-remark-prismjs with gatsby-plugin-mdx?

I suspect that before it worked because I was using a default template, rendering the content simply with {children}, but now I'm creating the pages programatically and using MDXRenderer to render the content <MDXRenderer>{data.body}</MDXRenderer>

That said, it could be that the code is parsed and is shown in the mdxAST that I can retrieve with

    current: blogPost(id: { eq: $id }) {
      id
      excerpt
      body
      slug
      title
      body
      keywords
      date(formatString: "MMMM DD, YYYY")
      tags
      type
      snippet
      abstract
      ... on MdxBlogPost {
        parent {
          ... on Mdx {
            mdxAST
            timeToRead
            wordCount {
              words
            }
          }
        }
      }
    }

But I'm unable to use mdxAST with MDXRenderer (or without it, I can't find the way)

So I'm stuck here, thinking that pehaps I should go back to create mdx pages non-programatically?

package.json of my gatsby-theme-core

{
    "name": "",
    "version": "",
    "main": "index.js",
    "author": "",
    "license": "MIT",
    "peerDependencies": {
      "@mdx-js/react": "^1.0.27",
      "gatsby": "^2.13.13",
      "react": "^16.9",
      "react-dom": "^16.9"
    },
    "dependencies": {
      "@mdx-js/mdx": "^1.3.1",
      "gatsby-plugin-mdx": "^1.0.24",
      "gatsby-plugin-sharp": "^2.2.12",
      "gatsby-source-filesystem": "^2.1.9",
      "gatsby-transformer-sharp": "^2.2.6",
      "remark-slug": "^5.1.2",

      "babel-plugin-styled-components": "1.10.6",
      "gatsby-plugin-styled-components": "3.1.2",
      "styled-components": "4.3.2",

      "gatsby-remark-prismjs": "^3.2.8",
      "prismjs": "^1.16.0",
      "gatsby-remark-copy-linked-files": "^2.1.6",
      "gatsby-remark-images": "^3.1.12",
      "react-share": "3.0.0"
    },
    "devDependencies": {
      "@mdx-js/react": "^1.3.1",
      "gatsby": "^2.13.70",
      "react": "^16.9.0",
      "react-dom": "^16.9.0"
    },
    "repository": {
      "type": "git",
      "url": ""
    }
  }

gatsby-config (mdxPrism = true)

const withDefaults = require(`./utils/default-options`)

module.exports = themeOptions => {
  const options = withDefaults(themeOptions)
  const { mdx, mdxPrism } = options
  return {
    plugins: [
      mdx && {
        resolve: `gatsby-plugin-mdx`,
        options: {
          extensions: [`.mdx`, `.md`],
          gatsbyRemarkPlugins: [
            { resolve: `gatsby-remark-copy-linked-files` },
          ],
          remarkPlugins: [require(`remark-slug`)],
        },
      },
      mdxPrism && {
        resolve: `gatsby-plugin-mdx`,
        options: {
          extensions: [`.mdx`, `.md`],
          gatsbyRemarkPlugins: [
            {
              resolve: `gatsby-remark-prismjs`,
              options: {
                classPrefix: 'language-',
                inlineCodeMarker: null,
                aliases: {},
                showLineNumbers: false,
              },
            },
            { resolve: `gatsby-remark-copy-linked-files` },
          ],
          remarkPlugins: [require(`remark-slug`)],
        },
      },
      {
        resolve: `gatsby-source-filesystem`,
        options: {
          path: options.contentPath || `content/posts`,
          name: options.contentPath || `content/posts`,
        },
      },
      `gatsby-plugin-styled-components`,
      `gatsby-transformer-sharp`,
      `gatsby-plugin-sharp`,
    ].filter(Boolean),
  }
}

And before I had the following in gatsby-config

      resolve: `gatsby-mdx`,
      options: {
        defaultLayouts: { default: path.resolve(__dirname, './src/templates/template-mdx.js') },
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: 'language-',
              inlineCodeMarker: null,
              aliases: {},
              showLineNumbers: false,
            },
          },
        ],
      },
    },

MDX question or discussion

Source

kuworking

👍1

Most helpful comment

@kuworking I see, I've fixed my issue now.

For anyone having this issue in the future, here are some helpful resources.

LpmRaven on 30 Sep 2019

👍4

All 6 comments

According to the Gatsby MDX docs, it's actually better to use https://github.com/FormidableLabs/prism-react-renderer rather than gatsby-remark-prismjs

ChangoMan on 4 Sep 2019

According to the Gatsby MDX docs, it's actually better to use https://github.com/FormidableLabs/prism-react-renderer rather than gatsby-remark-prismjs

Yes, I see that, thanks!

kuworking on 10 Sep 2019

@kuworking Did you manage to get gatsby-plugin-mdx to work with prism-react-renderer and MDXRenderer? I am having the same issue.

LpmRaven on 29 Sep 2019

@LpmRaven I switched prism for highlight because I also needed to apply styles post-compilation, so I didn't try at the end

kuworking on 29 Sep 2019

@kuworking I see, I've fixed my issue now.

For anyone having this issue in the future, here are some helpful resources.