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?
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.