Improve support for code blocks that have long code statements

[damithc]

Current: code blocks require horizontal scrolling if the lines are longer than the boxes.
Suggested: give an easy way to see the code without scrolling e.g., auto expand to full width when you click on the code block.
Also, we might want to auto-wrap longer lines to make such code blocks printer friendly.

[yamgent]

Also, we might want to auto-wrap longer lines to make such code blocks printer friendly.

Auto wrap can be enabled by adding this css style:

pre {
    white-space: pre-wrap;
}

[alyip98]

I tested with Google Chrome's print preview and the current implementation looks like this:

The effect is the same as adding

pre {
    white-space: pre-wrap;
}

The wrapped line does not start where we expect it to.

Furthermore, I've done a bit of research on how others implement line numbers and most of them (Github, hljs line number plugin) use a <table> to style their line numbers. There is a line number plugin for prismjs that uses spans but they generate them in JS with dynamically resized dimensions.

This means that we effectively can't use auto wrap. The simplest solution (and my preferred) would be to change our implementation to use <table> instead of <span>. Another solution could be inspired by the prismjs plugin and use client side JS.

In terms of "expanding" the code, we could add double-click to toggle wrapping.

[nbriannl]

This means that we effectively can't use auto wrap. The simplest solution (and my preferred) would be to change our implementation to use <table> instead of <span>. Another solution could be inspired by the prismjs plugin and use client side JS.

If that's the case @openorclose should consider trying this method since he's doing #991 now.

[openorclose]

I changed some css and now it looks like:

using

pre {
    white-space: pre-wrap;
}

[marvinchin]

I personally found the auto line wrap on hover makes the code block harder to read. What do you think of making line wrapping a fixed user defined attribute (wrap or no-wrap) instead of having it done on hover?

[acjh]

How about:

• wrap on click/tap on the code block, and
• unwrap on click/tap outside the code block?

[marvinchin]

Toggling the wrap on click/tap might make selecting for copying less user friendly. It also feels like one of those "hidden" behaviours where it's not very intuitive to the reader. Having some sort of button to toggle it would make this more explicit but it would also add more UI clutter.

This is just my 2c though - I'm happy to keep it as it is if everyone else prefers the current behaviour.

[damithc]

I don't mind having a small icon-like button for this purpose. We can even make it appear on hover/tap?

[tlylt]

Given that the codeBlockWrapButtons plugin has been added, will close this issue as completed if no objections.