PrismJS with React : using babel-plugin-prismjs

Question

I recently decided to use PrismJS with React and to avoid import repetitions I managed to use this babel-plugin-prismjs package in order to load plugins, languages and so on.

As indicated in the plugin documentation, I've created a .babelrc file located in my root folder :

{
  "plugins": [
    ["prismjs", {
        "languages": [
          "applescript",
          "css",
          "javascript",
          "markup",
          "scss"
        ],
        "plugins": ["line-numbers"],
        "theme": "twilight",
        "css": true
    }]
  ]

But I found that this file seemed to be ignored, as nothing is loaded and when console-logging my imported Prism object I'm only seeing syntax highlighting for the default languages.

The file where I want to get syntax highlighting have an import Prism from 'prismjs' statement and Prism.highlightAll()

So yes I can keep importing manually plugins, theme and languages in each of my files but I would want to find the reason of such an issue.

Thank you !

Yes, the file is ignored for me too. But I can't even get the default languages to work. I followed this article but can't figure out what is the issue as no errors. https://betterstack.dev/blog/code-highlighting-in-react-using-prismjs/ — user567068, Jul 28 '20 at 22:08

platocrat · Answer 1 · 2020-08-24T15:50:46.573

You're halfway there. You still need to import prismjs somewhere, usually in your app.js file, and then call Prism.highlightAll() in the appropriate file of the page you want syntax highlighting on.

My process was as follows:

Setup my .babelrc.js file:

const env = require('./env-config')

module.exports = {
  presets: ['next/babel'],
  plugins: [
    [
      'transform-define',
      env,
    ],
    [
      'prismjs', {
        'languages': ['javascript', 'css', 'html', 'jsx'],
        'plugins': ['line-numbers', 'show-language', 'copy-to-clipboard'],
        'theme': 'tomorrow',
        'css': true
      },
    ]
  ],
}

Import prismjs into my _app.js file (since I'm using Next.js, but with React, you would import this into our app.js file:

// ...
import 'prismjs'

// ...

Use the prismjs API to call the .highlightAll() method on your desired page(s):

function usePrismHighlightAll() {
  useEffect(() => {
    Prism.highlightAll()
  }, [])
}

export default function Page () {
  usePrismHighlightAll()

  // ...
}

As a sidenote,

could also move the usePrismHighlightAll() hook somewhere into your app.js file so that you could enable syntax highlighting in all your pages if that would save you from recalling the hook in several locations. However, I tried doing this, and unfortunately, it did not work in Next.js:

/* DO NOT USE THIS CODE NEXT.JS AS IT DOES NOT WORK */
import 'prismjs'

// ...

function usePrismHighlightAll() {
  useEffect(() => {
    Prism.highlightAll()
  }, [])
}

export default function App ({ Component, pageProps }) {
  usePrismHighlightAll()

  return (
    <>
      <Layout>
        <Header />
        <Component {...pageProps} />
      </Layout>
    </>
  )
}
/* DO NOT USE THIS CODE NEXT.JS AS IT DOES NOT WORK */

So, stick with the process I outlined in steps 1-3. Tthat worked for me to enable syntax highlighting on the first load of the page, let me know if this works for you.

PrismJS with React : using babel-plugin-prismjs

1 Answers1