Keep Line Numbers Fixed During Horizontal Scrolling

[vishnumaiea]

When the line numbers are enabled, the current behavior is also to scroll them along with the code when scrolled horizontally.

Image 1 - Before scrolling

Image 2 - After horizontal scrolling

But this is not the behavior of any text editors including VS Code. Instead, the line numbers remain stationary during horizontal scrolling. When a line is long, it makes it difficult for the user to see which line is which when scrolled.

[KevinBatdorf]

I've seen it both ways and made a choice to go with scrolling because that was easier to implement and also how torchlight does it. It's also not really an editor in that sense, but I get that it also looks nice. I'll try and see what's involved to make it an option. If it's just some CSS changes then I can add it fairly easily. I'll take a look this weekend.

[worldsdream]

This option would be great to have. So we as admins, can choose which option we like (with or without line numbers fixed).

[KevinBatdorf]

It looks like it will require me to add extra JS to handle line highlighting and I want to keep that JS code as light as possible.

I'm still exploring some options though, and might land on adding a module to include some CSS snippets, with some "common recipes" that let you add in something for this.

[KevinBatdorf]

btw there is some CSS here you could try. If anyone wants to share a URL I can customize it a bit more based on their theme, etc

div[class*='code-block-pro']:not(.x) pre {
    padding-right: 12px !important;
}
div[class*='code-block-pro']:not(.x) pre code {
    white-space: normal !important;
}