gatsby-remark-prismjs is not highlighting

[luisds95]

Preliminary Checks

• This issue is not a duplicate. Before opening a new issue, please search existing issues: https://github.com/gatsbyjs/gatsby/issues
• This issue is not a question, feature request, RFC, or anything other than a bug report directly related to Gatsby. Please post those things in GitHub Discussions: https://github.com/gatsbyjs/gatsby/discussions

Description

After installing gatsby-remark-prismjs according to the documentation, no code highlighting happens.

Two similar issues whose solutions didn't solve this:

• gatsby-remark-prismjs does not highlight #17462
• [gatsby-remark-prismjs] Code highlighting is not getting applied  #26768

Reproduction Link

https://github.com/luisds95/gatsby-prismjs-issue

Steps to Reproduce

1. Create a new gatsby project with gatsby new. Allow MDX.
2. Configure MDX and add a dynamic page with some code.
3. Install gatsby-remark-prismjs as per the documentation

Expected Result

Something similar to:

Actual Result

No highlighting

Environment

System:
    OS: Linux 4.19 Ubuntu 20.04.3 LTS (Focal Fossa)
    CPU: (8) x64 Intel(R) Core(TM) i7-6700HQ CPU @ 2.60GHz
    Shell: 5.0.17 - /bin/bash
  Binaries:
    Node: 16.13.2 - ~/.nvm/versions/node/v16.13.2/bin/node
    Yarn: 1.22.18 - ~/.nvm/versions/node/v16.13.2/bin/yarn
    npm: 8.1.2 - ~/.nvm/versions/node/v16.13.2/bin/npm
  npmPackages:
    gatsby: ^4.10.0 => 4.10.0
    gatsby-plugin-mdx: ^3.10.1 => 3.10.1
    gatsby-remark-prismjs: ^6.10.0 => 6.10.0
    gatsby-source-filesystem: ^4.10.0 => 4.10.0
    gatsby-transformer-remark: ^5.10.1 => 5.10.1
  npmGlobalPackages:
    gatsby-cli: 4.9.1

Config Flags

No response

[luisds95]

I'm happy to have a look if someone can point me into how to debug this (i.e. how to get some logs of what's happening on build time)

[LekoArts]

Hi!

When you use gatsby-plugin-mdx there is no need for gatsby-transformer-remark as the latter is only for markdown files, but you're writing MDX files (the former also supports plain markdown). So configuring gatsby-transformer-remark won't change the behavior of the MDX plugin.

You'll want to remove gatsby-transformer-remark and put the gatsby-remark-prismjs configuration inside the remarkPlugins key of gatsby-plugin-mdx: https://www.gatsbyjs.com/plugins/gatsby-plugin-mdx/#gatsby-remark-plugins

While people often use solutions like prism-react-renderer, the gatsby-remark-prismjs package should still work.

[luisds95]

Thanks @LekoArts! Super Helpful.

[ameghdadian]

Thanks!

This partly worked for me, however, with a little bit of a tweak. Instead of using remarkPlugins, I placed my configurations under gatsbyRemarkPlugins. This is how my gatsby-config.js looks now:

    {
      resolve: `gatsby-plugin-mdx`,
      options: {
        gatsbyRemarkPlugins: [
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: "language-",
              inlineCodeMarker: null,
              aliases: {},
              showLineNumbers: false,
              noInlineHighlight: false,
            },
          },
        ],
      },
    },