Line numbers scroll independently of code

[AWebOfBrown]

At the moment I'm finding my code and line numbers scroll independently, is this because the lines aren't included inside the virtualized grid? Or is the solution more complex?

[conorhastings]

you're correct about the reason but i'm not sure there's an easy fix, let me know if you have any ideas

[yorraksahb]

Any update on the issue?

[erykpiast]

I'd propose to inject properties related to line numbers into the renderer and re-implement the logic inside it. It requires changes in react-syntax-highlighter itself but seems cleaner than adding similar options to the renderer itself. It may be good starting point, though, to duplicate showLineNumbers, startingLineNumber, lineNumberContainerProps and lineNumberProps as a renderer factory options.

What do you think, @conorhastings?

[simmerer]

I've refactored line number rendering in react-syntax-highlighter, which has solved this issue for me in my project.

[simmerer]

Following up: this fix is in react-syntax-highlighter 13.0.0+, using the showInlineLineNumbers={true} prop in combination with showLineNumbers={true}.