[BUG] Unwrapped overflowed codeblocks not showing scroll bars about tiddlywiki5 HOT 6 CLOSED

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

from tiddlywiki5.

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.

from tiddlywiki5.

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>

from tiddlywiki5.

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.

from tiddlywiki5.

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

from tiddlywiki5.

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

from tiddlywiki5.