Support soft-wrapping for code blocks

[damithc]

For cases like the below, can we provide some sort of soft-wrapping support (similar to Intellij IDEA) so that the hidden part of the text can be made visible, especially for printing?

[Tim-Siu]

Adding Intellij IDEA like indention-aware code wrapping can be quite hard. A pure CSS approach may not be viable due to the nature of how whitespace is handled in HTML and CSS. Current logic in markdown-it does not involve indentation. We might have to work on the parser there. I am looking to extend markdownIt.renderer.rules.fence to support

A naive soft wrapping preserves the original line breaks and spaces but does not add additional indentation to each wrapped line.

Should we consider having this naive soft-wrapping in printing first?

[damithc]

Should we consider having this naive soft-wrapping in printing first?

In some cases this might be fine. But in cases where line breaks and indentation have a meaning (e.g., Python code), simply overflowing text to the next line can change the meaning of the text. So, we need a way to differentiate our soft-wrapping from actual line breaks/indentation in the text.

[yucheng11122017]

Hi @damithc, there is some existing functionality already with the plugin CodeWrap.
If the user has already wrapped the text using the plugin, when printing the wrap is maintained (ie the code is wrapped)

Otherwise, it is as shown in your display.
Would it be sufficient to make wrapping text the default behaviour when this is plugin is enabled so that when users print, it should already be wrapped unless chosen to do so?
Or should be code will be wrapped as long as there is printing? (regardless of whether this plugin is enabled and whether or not the wrap text button was clicked)

[damithc]

Hi @damithc, there is some existing functionality already with the plugin CodeWrap. If the user has already wrapped the text using the plugin, when printing the wrap is maintained (ie the code is wrapped)

Otherwise, it is as shown in your display. Would it be sufficient to make wrapping text the default behaviour when this is plugin is enabled so that when users print, it should already be wrapped unless chosen to do so? Or should be code will be wrapped as long as there is printing? (regardless of whether this plugin is enabled and whether or not the wrap text button was clicked)

Thanks for the investigation @yucheng11122017

1. I feel auto-wrapping should be done for printing no matter what. What do you think?
2. Should we enable the plugin by default? Seems like a useful functionality to have.
3. Not sure if wrapping should be the default behavior for normal viewing, as wrapped code may not be syntactically same as the original code, for space-sensitive languages such as Python.
4. Related to the above, the code wrapping behavior of the plugin is affected by this flaw as well. It is much better if there is a way to subtly differentiate soft line breaks that we inserted from actual line breaks in the original text.

[Tim-Siu]

I propose modifying markdown-it to wrap each line of code from the original markdown in an HTML element with a distinct CSS class. When processing each line of a code block, calculate the indentation level (e.g., the number of spaces or tabs at the beginning of the line) and set it as a CSS variable on the element wrapping that line. We can utilize CSS custom properties to dynamically adjust the indentation based on the content.

Sample HTML output from markdown-it (irrelevant details ignored):

<pre>
<span class="code-line" style="--indent-size: 0px;">function example() {</span>
<span class="code-line" style="--indent-size: 20px;">console.log("Hello, world!");</span>
<span class="code-line" style="--indent-size: 0px;">}</span>
</pre>

Example CSS:

.code-line {
  display: inline-block;
  white-space: pre-wrap; /* Allow wrapping */
  --indent-size: 0px; /* Default indentation size */
  margin-left: var(--indent-size); /* Apply indentation */
}

[yucheng11122017]

I propose modifying markdown-it to wrap each line of code from the original markdown in an HTML element with a distinct CSS class. When processing each line of a code block, calculate the indentation level (e.g., the number of spaces or tabs at the beginning of the line) and set it as a CSS variable on the element wrapping that line. We can utilize CSS custom properties to dynamically adjust the indentation based on the content.

Sample HTML output from markdown-it (irrelevant details ignored):

<pre>
<span class="code-line" style="--indent-size: 0px;">function example() {</span>
<span class="code-line" style="--indent-size: 20px;">console.log("Hello, world!");</span>
<span class="code-line" style="--indent-size: 0px;">}</span>
</pre>

Example CSS:

.code-line {
  display: inline-block;
  white-space: pre-wrap; /* Allow wrapping */
  --indent-size: 0px; /* Default indentation size */
  margin-left: var(--indent-size); /* Apply indentation */
}

Hi @Tim-Siu have you experimented with this? I'm wondering how accurate will the calculation be of the indentation..

[damithc]

... as soft-wrapped code may not be syntactically same as the original code, for space-sensitive languages such as Python.

Regarding this, I just realized that if line numbers are shown, there is an indirect indication which lines have been soft-wrapped. Perhaps we can use that? i.e., show line numbers when soft-wrapping, even if line numbers is not enabled for that code block

[Tim-Siu]

... as soft-wrapped code may not be syntactically same as the original code, for space-sensitive languages such as Python.

Regarding this, I just realized that if line numbers are shown, there is an indirect indication which lines have been soft-wrapped. Perhaps we can use that? i.e., show line numbers when soft-wrapping, even if line numbers is not enabled for that code block

Thank you for the observation. This indeed appears to be the perfect solution. To move forward with this, we can:

1. Make code soft-wrapping the bottom default setting, instead of offering it merely as a plugin. This ensures all users automatically benefit from better readability without the need for manual activation.
2. Apply code soft-wrapping when printing, ensuring that the printed is complete.
3. Automatically use line numbers with soft-wrapped code, even if not specifically enabled by the user.

I will raise a PR to implement these changes.

[yucheng11122017]

1. Make code soft-wrapping the bottom default setting, instead of offering it merely as a plugin. This ensures all users automatically benefit from better readability without the need for manual activation.
2. Apply code soft-wrapping when printing, ensuring that the printed is complete.
3. Automatically use line numbers with soft-wrapped code, even if not specifically enabled by the user.

Hi @Tim-Siu, the latter two sound good.
I'm not too sure about the first point though - whether we would want code wrapping to be the default setting instead of a plugin. Maybe anyone else would care to input?
In the meantime, you can do a PR for the latter two first that would be great!

[yucheng11122017]

Closed by #2431