Better display for long code block

When a blog post or forum post contains a long block of code (more than a screen worth e.g. the end of this post ) and needs a horizontal scrollbar, it's hard to read the code because the horizontal scrollbar if off-screen and it's not practical to use it. It sometime can also make it look like you read the whole line because the end of the code block view on x lines up with the end of a word, and since I'm not seeing the scrollbar I don't have an indication that there is possibly more text on the right.

While in an editor I like to use the keyboard to navigate, in the forums I prefer to only use the mouse.

I'm not sure what the solution should be, here are some ideas:

  • having code areas that are the height of the browser view, so that scrollbars can both be on the screen (maybe with a button to line up the view properly);
  • line wrapping toggle;
  • allowing code blocks to be wider than the width of the forum (not really solving the issue, but can help in most case);
  • having a "zoom popup" feature that create a view of the code that fits the browser view (probably require to restore the scroll offset when closed and reopened, and isn't probably not a good user experience);

We can add max-height: 80vh or something to the code block.

Ideally 100% would be best, but that would require to line up the view exactly, so a value where 100 - value is close to the amount of scroll offset you get with a single notch of the mouse wheel ?

20% of margin seems too much to me.


Replying to AsafG (#26638)