[gatsby-remark-prismjs] Code highlighting is not getting applied

[AbbottSoft]

Description

Currently, I am using gatsby-remark-prismjs in order to add style to code blocks. I would expect that my theme would apply the styles, but currently I get just white text.

Steps to reproduce

Create a markdown file with a code block inside and put it in src/posts/{filename} using the default gatsby starter. Apply the queried html using data.markdownRemark.html and use dangerouslySetInnerHTML prop on a div to apply the converted markdown. Use the following configurations below.

Dependencies in package.json:

"dependencies": {
    "@emotion/core": "^10.0.35",
    "@emotion/styled": "^10.0.27",
    "gatsby": "^2.24.47",
    "gatsby-image": "^2.4.16",
    "gatsby-plugin-catch-links": "^2.3.11",
    "gatsby-plugin-emotion": "^4.3.10",
    "gatsby-plugin-manifest": "^2.4.23",
    "gatsby-plugin-offline": "^3.2.23",
    "gatsby-plugin-react-helmet": "^3.3.10",
    "gatsby-plugin-sharp": "^2.6.27",
    "gatsby-plugin-typescript": "^2.4.18",
    "gatsby-remark-images": "^3.3.25",
    "gatsby-remark-prismjs": "^3.5.10",
    "gatsby-remark-responsive-iframe": "^2.4.12",
    "gatsby-source-filesystem": "^2.3.24",
    "gatsby-transformer-remark": "^2.8.28",
    "gatsby-transformer-sharp": "^2.5.13",
    "prismjs": "^1.21.0",
    "prop-types": "^15.7.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-helmet": "^6.1.0",
    "typescript": "^3.9.7"
  }

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-react-helmet`,
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-transformer-remark`,
      plugins: [
        "gatsby-remark-graphviz",
        `gatsby-remark-responsive-iframe`,
        `gatsby-remark-prismjs`,
        {
          resolve: `gatsby-remark-images`,
          options: {
            // It's important to specify the maxWidth (in pixels) of
            // the content container as this plugin uses this as the
            // base for generating different widths of each image.
            maxWidth: 590,
          },
        },
      ],
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
    `gatsby-plugin-typescript`,
    `gatsby-plugin-catch-links`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/src/posts`,
        name: "posts",
      },
    },
    // this (optional) plugin enables Progressive Web App + Offline functionality
    // To learn more, visit: https://gatsby.dev/offline
    // `gatsby-plugin-offline`,
  ],
}

gatsby-browser.js

/**
 * Implement Gatsby's Browser APIs in this file.
 *
 * See: https://www.gatsbyjs.org/docs/browser-apis/
 */

// You can delete this file if you're not using it
require("prismjs/themes/prism-tomorrow.css")

Expected result

I would expect my code blocks to have some degree of syntax highlighting and at least a background color change.

Actual result

I get no syntax highlighting and white text.

Environment

System:
OS: macOS 10.15.6
CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
Shell: 5.7.1 - /bin/zsh
Binaries:
Node: 14.8.0 - ~/.nvm/versions/node/v14.8.0/bin/node
Yarn: 1.21.1 - /usr/local/bin/yarn
npm: 6.14.7 - ~/.nvm/versions/node/v14.8.0/bin/npm
Languages:
Python: 3.7.3 - /Users/myusername/.pyenv/shims/python
Browsers:
Chrome: 85.0.4183.83
Firefox: 80.0
Safari: 13.1.2
npmPackages:
gatsby: ^2.24.47 => 2.24.47
gatsby-image: ^2.4.16 => 2.4.16
gatsby-plugin-catch-links: ^2.3.11 => 2.3.11
gatsby-plugin-emotion: ^4.3.10 => 4.3.10
gatsby-plugin-manifest: ^2.4.23 => 2.4.23
gatsby-plugin-offline: ^3.2.23 => 3.2.23
gatsby-plugin-react-helmet: ^3.3.10 => 3.3.10
gatsby-plugin-sharp: ^2.6.27 => 2.6.27
gatsby-plugin-typescript: ^2.4.18 => 2.4.18
gatsby-remark-images: ^3.3.25 => 3.3.25
gatsby-remark-prismjs: ^3.5.10 => 3.5.10
gatsby-remark-responsive-iframe: ^2.4.12 => 2.4.12
gatsby-source-filesystem: ^2.3.24 => 2.3.24
gatsby-transformer-remark: ^2.8.28 => 2.8.28
gatsby-transformer-sharp: ^2.5.13 => 2.5.13
npmGlobalPackages:
gatsby-cli: 2.12.87

[pieh]

Hi @AbbottSoft! Can you provide sample repository showing this problem?

I just tried using prism-tomorrow theme with slightly adjusted https://github.com/gatsbyjs/gatsby-starter-blog (just adjusted theme from default to one you used + added some actual "code" content):

Tested content:

### No specified language (no syntax highlight)

```
const foo = "bar"
```

### Specified `js` language

```js
const foo = "bar"
```

And results were like that:

Which I think is what you would expect, but it's not what you get in your case.

One thing to check for sure is to investigate styles in dev tools. Particularly styles for <pre class="language-[some-language]"> elements. In my case I get these:

And all of those come from prism css theme file. I think in this case something with higher css specificity overwrites the background property. The bright text color seems about right in your screenshot, just background seems off?

[AbbottSoft]

Hey @pieh! Here is a reproduction of the bug in question.

https://github.com/AbbottSoft/issue28768

Hope this helps!

[AbbottSoft]

Looks like I am not getting any of the classes applied to the <pre> tag. Not sure if this is the only problem, but this is one major different between yours and mine. Is there any idea why it might not apply to mine? The only thing I can think of that is unique in my project is that I am leveraging gatsby-plugin-emotion. I attempted to add that plugin to gatsby-transformer-remark in order to see if that impacted element creation, but no dice. 😢

[AbbottSoft]

I was able to resolve this issue and my problem could not have been simpler. My gatsby-config.js was inaccurate. For the gatsby-transformer-remark plugin, I was missing the options property. The following below was able to resolve my issue.

    {
      resolve: `gatsby-transformer-remark`,
      options: {
         plugins: [
           "gatsby-remark-graphviz",
           `gatsby-remark-responsive-iframe`,
           `gatsby-remark-prismjs`,
           {
             resolve: `gatsby-remark-images`,
             options: {
               // It's important to specify the maxWidth (in pixels) of
               // the content container as this plugin uses this as the
               // base for generating different widths of each image.
               maxWidth: 590,
            },
          },
        ],
      },
    },

I was surprised a problem like this didnt throw an error in the gatsby dev server since it seems all plugins which take the object syntax seem to require the resolve and options property. Maybe this would be a useful addition to log when someone accidentally puts the plugins property in the wrong spot with a helpful message? Closing this issue for now.