Improve rendering of log excerpts

[smortex]

Text quotation wrap lines and makes the log impossible to read:

Use code block instead.

In order to improve this, introduce a new liquid block log that we can
use in the markdown documents around log excerpts:

{% log %}
A very long line that can be larger than the screen of the user.
A second very long line that can also be larger that the screen of the user.
{% endlog %}

This new block transform each new-line character to an explicit BR tag,
and wraps the result in a BLOCKQUOTE tag with custom CSS styling. This
styling makes it easier to read long/wrapped lines by indenting
continuation lines:

|<------------ screen width------------->|
| A very long line that can be larger    |
|   than the screen of the user.         |
| A second very long line that can also  |
|   be larger that the screen of the     |
|   user.                                |

[HofiOne]

please use a code language class type as well (shell, text, etc.)

text or plaintext is a good candidate

[smortex]

I can do that 👍. I found many other cases with inconsistent behavior, and it seem to be related to trailing white space at end of line that is continued on the next line: when white space is present, the rendering has a line break:

> foo  
> bar

is rendered with two lines, while:

> foo
> bar

is wrapped in a single line.

Since that does seem an "extension" of the rendering library (I cannot reproduce this is this reply on GitHub), editors can be configured to trim white-space at end of line and git complain when it sees some, I think it would make sense to grep the code to find and hunt these trailing white spaces, and adjusting the snippets with code blocks or something more appropriate.

Since this is quite a large change, before doing it I would like to have your opinion on this. Would that be okay?

[HofiOne]

My concern is that there is currently a significant inconsistency between code blocks

and blockquotes

Although blockquotes have the issues you mentioned (and a few others), I would prefer using them to create a clearer visual distinction, as the current look

is a bit confusing for me.

I can work with code blocks as well, but in that case I would introduce a dedicated language class (for example, example, quote, or log) to customize their appearance and distinguish them from standard code blocks.

I understand this would require a more extensive effort, given the number of existing instances, so I will leave the decision to you. One option could be to open a new issue and address this later.

[smortex]

I also think it is inconsistent. The main advantage of the blockquote is that it wraps long lines, which help because a single long line with a scroll bar is a PITA.

I just found about the CSS text-indent hanging and each-line keywords that are supported on main browsers:
https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/text-indent
Combined with white-space: break-spaces and applied to a blockquote, lines are wrapped and continued lines are indented which I think makes the logs more readable.

I can work with code blocks as well, but in that case I would introduce a dedicated language class (for example, example, quote, or log) to customize their appearance and distinguish them from standard code blocks.

I like this idea, and will try to implement it.

[smortex]

Implemented it using a new liquid block and a bit of css. I am quite happy with the result: long lines are wrapped but new-lines are not collapsed, continuation is clearly visible and overflow only occurs when the screen is not large enough:

Current	Proposal

[HofiOne]

Sorry, I was not referring to the stylesheet modification as the larger effort, but rather to fixing all the issues in the existing blockquotes (as the problem is not only the extra whitespace, but also incorrect line breaks, which is not a simple grep-and-replace fix).

Please do not modify the current code blocks — they are acceptable for all existing languages, and I had no issues with them in my earlier concerns. Instead, I would focus on improving blockquotes, either by:

• switching from blockquotes to code blocks AND introducing a new language class (e.g. example, quote, or log) with a distinct style (for example, similar colors to the actual that the blockquote is using, but with a light gray background), or
• enhancing the blockquote style itself to have a more “block-like” appearance, not just a leading vertical line but also, for example, a light gray background