Gatsby: Why is gatsby-remark-prismjs not highlighting code blocks like nginx and python?

[cbillowes]

Summary

Prism is working for most of my code blocks. I picked up that python and nginx are not being highlighted. So far, those are the only two languages that I have picked up. I thought it could be my styles but the tokens aren't generated at all.

Question: Do I need to specifically configure something in order to get these blocks to transform or have I misconfigured something? I can't find any issues online relating to this so I can't see how it can be a bug.

Relevant information

• I removed all my remark plugins to see if there was something interfering with the transformation of these code blocks.
• I upgraded my package to the latest version.

Environment (if relevant)

  System:
    OS: ma

cOS 10.15.4
    CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 8.17.0 - ~/.nvm/versions/node/v8.17.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.14.4 - ~/.nvm/versions/node/v8.17.0/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 81.0.4044.129
    Firefox: 72.0.1
    Safari: 13.1
  npmPackages:
    gatsby: ^2.20.36 => 2.20.36 
    gatsby-image: ^2.3.5 => 2.3.5 
    gatsby-plugin-google-analytics: ^2.2.5 => 2.2.5 
    gatsby-plugin-manifest: ^2.3.7 => 2.3.7 
    gatsby-plugin-offline: ^3.1.5 => 3.1.5 
    gatsby-plugin-react-helmet: ^3.1.24 => 3.2.5 
    gatsby-plugin-robots-txt: ^1.5.0 => 1.5.0 
    gatsby-plugin-sass: ^2.2.4 => 2.2.4 
    gatsby-plugin-sharp: ^2.5.7 => 2.5.7 
    gatsby-plugin-sitemap: ^2.3.6 => 2.3.6 
    gatsby-plugin-styled-components: ^3.2.4 => 3.2.4 
    gatsby-plugin-superlink: ^1.0.1 => 1.0.1 
    gatsby-plugin-twitter: ^2.2.5 => 2.2.5 
    gatsby-remark-embed-gist: ^1.1.9 => 1.1.9 
    gatsby-remark-embed-youtube: 0.0.7 => 0.0.7 
    gatsby-remark-emoji: 0.0.3 => 0.0.3 
    gatsby-remark-images: ^3.2.6 => 3.2.6 
    gatsby-remark-interactive-gifs: ^1.0.3 => 1.0.3 
    gatsby-remark-prismjs: ^3.5.0 => 3.5.0 
    gatsby-remark-responsive-iframe: ^2.3.4 => 2.3.4 
    gatsby-source-filesystem: ^2.2.5 => 2.2.5 
    gatsby-transformer-remark: ^2.7.5 => 2.7.5 
    gatsby-transformer-sharp: ^2.4.7 => 2.4.7 
  npmGlobalPackages:
    gatsby-cli: 2.8.22

File contents (if changed)

gatsby-config.js:

 {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-interactive-gifs`,
            options: {
              root: `${__dirname}`,
              src: `${__dirname}/src/gifs`,
              dest: `${__dirname}/public/static/gifs`,
              play: `${__dirname}/src/images/play.gif`,
              placeholder: `${__dirname}/src/images/placeholder.gif`,
              loading: `${__dirname}/src/images/loading.gif`,
              relativePath: `/static/gifs`,
            },
          },
          `gatsby-remark-images`,
          `gatsby-remark-emoji`,
          `gatsby-remark-responsive-iframe`,
          {
            resolve: `gatsby-remark-embed-youtube`,
            options: {
              width: 800,
              height: 400,
            },
          },
          {
            resolve: "gatsby-remark-embed-gist",
            options: {
              username: `cbillowes`,
            },
          },
          {
            resolve: `gatsby-remark-prismjs`,
            options: {
              classPrefix: `language-`,
              inlineCodeMarker: `±`,
            },
          },
        ],
      },
    },

package.json: N/A

{
  "name": "curious-programmer-nitrogen",
  "private": true,
  "description": "A curious place for a curious mind. A blog by Clarice Bouwer.",
  "version": "1.0.0",
  "author": "Clarice Bouwer <[email protected]>",
  "dependencies": {
    "acorn": "^7.1.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.28",
    "@fortawesome/free-brands-svg-icons": "^5.13.0",
    "@fortawesome/free-regular-svg-icons": "^5.13.0",
    "@fortawesome/free-solid-svg-icons": "^5.13.0",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "babel-plugin-prismjs": "^2.0.1",
    "babel-plugin-styled-components": "^1.10.7",
    "clipboard": "^2.0.6",
    "gatsby": "^2.20.36",
    "gatsby-image": "^2.3.5",
    "gatsby-plugin-google-analytics": "^2.2.5",
    "gatsby-plugin-manifest": "^2.3.7",
    "gatsby-plugin-offline": "^3.1.5",
    "gatsby-plugin-react-helmet": "^3.1.24",
    "gatsby-plugin-robots-txt": "^1.5.0",
    "gatsby-plugin-sass": "^2.2.4",
    "gatsby-plugin-sharp": "^2.5.7",
    "gatsby-plugin-sitemap": "^2.3.6",
    "gatsby-plugin-styled-components": "^3.2.4",
    "gatsby-plugin-superlink": "^1.0.1",
    "gatsby-plugin-twitter": "^2.2.5",
    "gatsby-remark-embed-gist": "^1.1.9",
    "gatsby-remark-embed-youtube": "0.0.7",
    "gatsby-remark-emoji": "0.0.3",
    "gatsby-remark-images": "^3.2.6",
    "gatsby-remark-interactive-gifs": "^1.0.3",
    "gatsby-remark-prismjs": "^3.5.0",
    "gatsby-remark-responsive-iframe": "^2.3.4",
    "gatsby-source-filesystem": "^2.2.5",
    "gatsby-transformer-remark": "^2.7.5",
    "gatsby-transformer-sharp": "^2.4.7",
    "moment": "^2.24.0",
    "node-sass": "^4.14.0",
    "prismjs": "^1.20.0",
    "prop-types": "^15.7.2",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-helmet": "^5.2.1",
    "react-moment": "^0.9.7",
    "react-router-dom": "^5.1.2",
    "styled-components": "^5.1.0",
    "typescript": "^3.8.3"
  },
  "devDependencies": {
    "@babel/core": "^7.8.7",
    "@babel/plugin-transform-modules-commonjs": "^7.8.3",
    "@storybook/addon-actions": "^5.3.17",
    "@storybook/addon-links": "^5.3.17",
    "@storybook/addons": "^5.3.17",
    "@storybook/react": "^5.3.17",
    "@types/jest": "^25.1.4",
    "babel-jest": "^25.4.0",
    "babel-loader": "^8.0.6",
    "enzyme": "^3.11.0",
    "enzyme-adapter-react-16": "^1.15.2",
    "enzyme-to-json": "^3.4.4",
    "identity-obj-proxy": "^3.0.0",
    "jest": "^25.1.0",
    "jest-environment-jsdom": "^25.1.0",
    "jest-environment-jsdom-global": "^1.2.1",
    "prettier": "^1.19.1"
  },
  "keywords": [
    "gatsby"
  ],
  "license": "MIT",
  "scripts": {
    "build": "gatsby build",
    "develop": "gatsby develop --verbose",
    "production": "gatsby build && gatsby serve",
    "format": "prettier --write \"**/*.{js,jsx,json,md}\"",
    "start": "npm run develop",
    "serve": "gatsby serve",
    "test": "jest",
    "test:watch": "jest --watch",
    "test:coverage": "jest --coverage",
    "storybook": "NODE_ENV=development start-storybook -s public -p 6006",
    "storybook:production": "NODE_ENV=production start-storybook -s public -p 6007",
    "build-storybook": "NODE_ENV=production build-storybook -s public"
  }
}

gatsby-node.js: This is rather large. Essentially it just creates pages, nodes and fields.

gatsby-browser.js: N/A

require("prismjs/themes/prism-tomorrow.css")
require("prismjs/plugins/line-numbers/prism-line-numbers.css")

gatsby-ssr.js: N/A

[pieh]

Can you share reproduction? I tried this locally with editing our using-remark example and it works for me:

So there must be something speciffic - maybe conflict - in your setup.

[cbillowes]

@pieh, thank you for taking the time to look into this for me.

• Repo: https://github.com/cbillowes/curious-programmer-nitrogen
• git clone [email protected]:cbillowes/curious-programmer-nitrogen.git. Requires Node 10.
• npm i
• npm run develop
• Access http://localhost:8000/blog/example

I have 2 code blocks under the Problem code section of that page (nginx & python).

Closer to the bottom of the page under Code blocks are bash and clojure which are highlighted.

Please let me know if you need anything else in order to reproduce it.

[cbillowes]

I also noticed that the system information I posted was incorrect. I must have copied it from a terminal instance where I did not explicitly use 10 from nvm.

The correct config is:

Binaries:
    Node: 10.19.0 - ~/.nvm/versions/node/v10.19.0/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.14.3 - ~/.nvm/versions/node/v10.19.0/bin/npm

[pieh]

Ok. The gatsby-remark-prismjs does it correctly, but there seem to be conflict related to how you use babel-plugin-prismjs (where you don't include ngingx and python languages - https://github.com/cbillowes/curious-programmer-nitrogen/blob/b5c1ac942669353a254193df746d42c4dfae9e76/.babelrc#L4-L24) and how you run manually prismjs in browser ( https://github.com/cbillowes/curious-programmer-nitrogen/blob/b5c1ac942669353a254193df746d42c4dfae9e76/src/components/layout.js#L14-L16 ).

If you comment out the code in layout.js (Prism.highlightAll()) - then you get highlighting. I'm not exactly sure why you do use this manually like this, so I'm not sure if fix would be to both remove babel plugin and manual Prism.highlightAll() call. Our base case is that users don't need to add prismjs in their frontend code, because gatsby-remark-prismjs adds needed html markup during the build, so users visiting your site actually don't need prismjs javascript loaded, because code blocks are already processed.

[pieh]

If you do need to use prismjs yourself in part of your site that isn't generated from markdown - consider making more fine selective functions than highlightAll() (so it doesn't run on content produced from markdown), so it doesn't conflict with gatsby-remark-prismjs

[cbillowes]

🤦‍♀️ I completely overlooked that. Added and forgotten. Thank you for picking it up! 🎉
As you say, I added that for code blocks on the site that weren't markdown related but I don't need that anymore.