gatsby-remark-prismjs line highlight breaks when react-live is included

[bvaughn]

I recently noticed a bug with the gatsby-remark-prismjs plugin on a site I'm working on: code line-highlights show up when I navigate to a page initially, but if I reload the page in place they're missing. (There's no wrapper <span class="gatsby-highlight-code-line">...</span> after a page reload).

After a lot of trimming down, I've been able to demonstrate this bug in a small repro (at bvaughn/gatsby-remark-prismjs-react-live-bug). The tl;dr is that including any react-live component (even if it's not used) will break the gatsby-remark-prismjs plugin line highlight.

I will attempt to further track this issue down. I'm also unclear about whether I should file this as an issue for Gatsby or React Live, but I suspect it's most likely something that should be fixed in React Live.

Relates to gatsbyjs/gatsby/issues/1486

[bvaughn]

Poking this apart further, it looks like utils/prism requiring prismjs/components/prism-core is sufficient to trigger the issue. I'm guessing initially that this is causing Prism to re-process all of the code blocks and maybe it's wiping out the line highlighting in the process?

[kitten]

Hm, so it seems that the gatsby-remark plugin is importing the entire prismjs lib, and then dynamically importing languages. I'm not sure what the issue is, but importing prismjs defaults to also loading all languages.

It's quite possible that this causes issues due to multiple insertBefore calls :/

https://github.com/gatsbyjs/gatsby/blob/master/packages/gatsby-remark-prismjs/src/highlight-code.js#L1

Edit:

I'm guessing initially that this is causing Prism to re-process all of the code blocks and maybe it's wiping out the line highlighting in the process?

Prism doesn't take control over an element but instead just takes a string of code and returns html code as a string. So it's an import issue.

Edit 2: It might be resolved by replacing the prismjs/components/prism-core import with the entire prismjs library import actually

[bvaughn]

Yeah, it looks like the copy of prism-core required by react-live is clobbering Gatsby's initial rendered content. I can avoid this by updating Prism to check an element's contents before potentially re-highlighting it, but... I kind of doubt Prism would be interested in accepting that change.

[bvaughn]

Maybe a potential fix here would be for Gatsby to make use of Prism's data-line attribute as mentioned in the Prism docs. Not sure... I will try to test that out locally.

Scratch that. Prism's line highlighting seems pretty fragile/busted and this looks like a dead-end based on my initial testing.

[bvaughn]

Looks like maybe this can be avoided by removing the language attribute from Gatsby's pre-generated <pre> tags. This way, requiring Prism a second time won't re-highlight the already-processed content.

At this point, this is clearly not an issue with react-live so I'm going to close this out. Thanks for your input!

[kitten]

@bvaughn cool 😄 just ping me here if you think that we need to change something in react-live to avoid more of these kinds of issues.

btw glad to see that you're looking into react-live for the React docs 😉 You were working on that with @joecritch, right? 😄

[bvaughn]

Thank you!

Yes, it's an ongoing effort. 😄