0

I am using the "Toolbar" and "Copy To Clipboard" plugins with PrismJS to display a code snippet and a toolbar button to copy the code to clipboard and am loading my Prism js and css files in my <head>.

PrismJS works as expected if I start directly to the page (ex: http://localhost:3000/demo/example).

But if I navigate away from the page and return to it or start from the home page (http://localhost:3000/) and navigate to the page with the code snippet the button does not show up.

When I inspect the code I can see that the <div class="toolbar"> that normally holds the Copy button is missing.

I tried loading the PrismJS file with plugins via a plugin and adding the file in nuxt.config.js and that prevents the Copy button showing up at all.

Why might this be happening?

halfer
  • 19,824
  • 17
  • 99
  • 186
av0000
  • 1,917
  • 6
  • 31
  • 51

2 Answers2

1

After checking out this blog I realized I needed to "highlight" all the prism codeblocks in the Mounted lifecycle like so:

...
    import Prism from "~/plugins/prism";

    export default {
        mounted() {
            Prism.highlightAll();
        },
...

I didn't use the prism npm package like in the article, I just downloaded it from the PrismJS homepage and included it and the styles in my nuxt.config.js.

av0000
  • 1,917
  • 6
  • 31
  • 51
1

For React users, you can do that using react useEffect hook, something like this:

useEffect(() => {
    const highlight = () => {
      Prism.highlightAll();
    };
    highlight();
  }, []);
Mohamed El Firdoussi
  • 71
  • 1
  • 2