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;
}

[dcooney]

The solution above appears to remove line indentation (tabs/spaces etc).

Before:

In my testing, the following CSS works by adding a white-space rule to the span.line element.

div[class*='code-block-pro']:not(.x) pre span.line {
	white-space: pre-wrap;
}

After:

[KevinBatdorf]

Ah great! I'll start suggesting that then. That solution could ossibly work with the line highlighter too, and if so I could make this an option in the plugin. Will look into that.

[dcooney]

Actually, I just realized my solution above doesn't solve the issue in this ticket, fixed position line numbers 🤦‍♂️
I was looking for a solution to wrap lines and not have the line numbering get out of sorts.

[KevinBatdorf]

Well, I also misinterpreted it actually 😅 but the line wrapping is more commonly requested. Fixed line numbers might be easier actually. I'll check on both.