Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 6 years ago
Comments:7 (5 by maintainers)

Top GitHub Comments

1reaction

bvaughncommented, Jul 13, 2017

Thank you!

Yes, it’s an ongoing effort. 😄

1reaction

bvaughncommented, Jul 12, 2017

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!