bug: remark-prismjs, remove duplicate class from code tag #6860
Conversation
|
Deploy preview for using-postcss-sass failed. Built with commit 27308c7 https://app.netlify.com/sites/using-postcss-sass/deploys/5b5f12e7792f894e4bbc2d31 |
|
Deploy preview for using-drupal ready! Built with commit 27308c7 |
|
Deploy preview for gatsbygram ready! Built with commit 27308c7 |
|
Deploy preview for using-glamor failed. Built with commit 27308c7 https://app.netlify.com/sites/using-glamor/deploys/5b5f12e8792f894e4bbc2d37 |
| @@ -139,9 +139,10 @@ This is some beautiful code: | |||
| ] | |||
| ``` | |||
|
|
|||
| You can also add line highlighting. It adds a span around lines of code with a | |||
| special class `.gatsby-highlight-code-line` that you can target with styles. See | |||
| this README for more info. | |||
There was a problem hiding this comment.
Note that I removed this reference to a README because there was no link, I checked the history and it was never linked.
|
Hmm, this reverts #4332 - is this custom styling that this tries to fix? |
|
Ah, I had not seen #4322. I see that prismjs site is using the class on both. We probably want to maintain consistency (where we can) with the way they do things. Looking over their code it looks like both are meant to have the class (for whatever reason): // Set language on the element, if not present
element.className = element.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
if (element.parentNode) {
// Set language on the parent, for styling
parent = element.parentNode;
if (/pre/i.test(parent.nodeName)) {
parent.className = parent.className.replace(lang, '').replace(/\s+/g, ' ') + ' language-' + language;
}
}``` |
This resolves #6858 that was brought up in reactjs/react.dev#1072 and reactjs/react.dev#1077. I've removed the class from the inner
codeblock. It is left intact when code is used inline as there is nopretag wrapping thecodetag.It was not described to put a class on both tags in the documentation, but depending on how people wrote their css this could be considered a breaking change.
For example if they noticed this and accounted for it by doing something like: