[BUG] Unwrapped overflowed codeblocks not showing scroll bars

[Leilei332]

Describe the bug

Setting "Wrap long lines in code blocks" to "No" in "Theme tweaks" cause the code to overflow.

While the code blocks rendered by highlight.js shows a scroll bar under the code blocks.

Expected behavior

A scroll bar should be shown under the overflowed code block.

The style overflow-x: auto should be applied to the element.

To Reproduce

No response

Screenshots

No response

TiddlyWiki Configuration

Tiddlywiki 5.2.4 prerelease

Additional context

No response

[pmario]

Your example does not show the plain text that creates the output.

[pmario]

The HTML CODE element does not respect any overflow settings. overflow requires a "block" element. CODE is an inline element. So the only way to "wrap lines" with extra long inline-code is to use white-space: pre-wrap; which is exactly, what the Theme-Tweak setting does.

If you use code-blocks instead of `inline code`

```
your-code-block-comes-here
```

It should work as expected.

[pmario]

You could do this, if you want to force it into 1 line and a scroll-bar. The scrollbar is created by PRE, which is a block element.

<pre style="overflow:auto">`sssssssssssssssssssssssssssssssssss ssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssssss
`</pre>

[Leilei332]

Actually, I did use code blocks in the screenshot.

Since you mentioned inline code, I tested them in tiddlywiki 5.3.4 prerelease with only highlight.js plugin installed.

The plain text:

The inline code is unwrapped and overflowed. I think it shouldn't be unwrapped since it isn't a code block.

For the two code blocks, only the second code block which is rendered by highlight.js showed a scroll bar. The first one is overflowed.

[pmario]

You are right. It seems we do it wrong and highlight.js does it right. A bit more experimenting is needed. We need to make sure, that there are no unwanted side effects.

It seems hljs does set the class of the CODE element to display: block; overflow-x: auto, which seems to do the trick. A bit of padding adjustment should be needed too.

Nice catch -- Thanks for reporting

[pmario]

The padding needs to be adjusted if "Wrap long lines in code blocks" is set to "No" in "Theme tweaks"