Reactjs.org: Indentation is sometimes wrong

[gaearon]

Not sure but maybe Gatsby 2 upgrade broke it.

See last <input> on the Forms page:

This doesn't seem like an issue with the source. Just something messes up indentation when rendering.

Specifically it seems to happen when there's highlighting on a line.

[Saifadin]

It seems like the <input /> is not aligned inside the span for the highlighting. If you compare it to the html for the highlighting in the middle part, it seems to be completely off. But looking at the source code it really is just fine.

[tvanantwerp]

Not sure how Gatsby formats code, but the leading whitespace before the <input /> is inside its own span with class of gatsby-highlight-code-line that is set to display: block. I think the <input /> should be inside of that span, but it isn't. So it's being pushed down by a block element containing only whitespace.

[marcaaron]

Possibly relevant thread: https://github.com/gatsbyjs/gatsby/issues/8058

[jonsuh]

I noticed this same bug on gatsbyjs.org a couple of weeks ago—looks like it was related to gatsby-remark-prismjs and it was patched: https://github.com/gatsbyjs/gatsby/issues/8058

[gaearon]

Thank you all!

[alexandernanberg]

Edit: All the answers loaded after I commented 😅

Cool that you figured it out! 😄