I noticed this topic: Disable code block from Horizontal scrolling? about enabling word-wrapping for codeblocks. I have the opposite wish- I’d like my codeblocks to never softwrap.
I mucked around enough to discover this bit of css that does it:
.markdown-preview-view code {
white-space: pre;
}
Problem is, the background box dimensions are still sized as if the text was wrapped. It just looks weird:
@ryanjamurphy thanks, but I’m trying to disable word wrapping. Basically how Stack Overflow does it—where the code blocks inherit the width of the page, and show a horizontal scrollbar to handle overflow text if it’s wider than the view.
Yes white-space: pre; works for the wrapping, but the background box/color (see my screenshot above, the red highlighted edge) isn’t in the right place. That’s what I was getting at…
@luckman212 - Try this: overflow-x: auto;
It’s what I use on most of my code blocks when I don’t wrap.
Other parameters you can try in place of auto are scroll and hidden - they look similar, but achieve different things. Here’s a reference at W3Schools.
There hasn’t been any activity for 5 days, could you please see if you’d like to pick any of the existing answers as the solution, or do you still need help with something?
Would appreciate it if you could clarify on that, thanks!
If you’ve uncovered a bug, please post in #bug-reports. If you’re asking about a feature that’s not there yet, you can post in #feature-requests.
If this is about troubleshooting community plugins or themes, it might be a good idea to ask in #plugins and #css-themes on our Discord.
@Nebucatnetzer - That’s fair.
Out of the box in preview, Obsidian applies autoscroll. That is, when the content is too long for the view pane, a scrollbar appears and it scrolls, keeping to the border of the code block (not outside, as in OP’s shot).
In editor, the long lines wrap so the content remains visible.
That’s a long way of saying (guessing) that the OP is probably using a theme that overrides default in some way. If it’s still an issue, he could let us know what theme he’s using, or contact the author to troubleshoot. If it’s a completely self-authored theme, then providing the code here could help, too.
@luckman212 - are you still having issues? If no, please let us know what worked. If yes, could you provide more details, please? Others may benefit from the answers we find, especially if they are using the same theme you are.
I’m just using the standard Dark theme. Still struggling to find the right CSS to get exactly what I want, and got a little busy with other stuff to track it down.
I just discovered that on code blocks that you are NOT specifying a language: i.e: three backtics and css or js etc on the same line - the core setting of Settings → Editor → Line wrap affects blocks, too.
I suspect you have this turned on. I assume you’ll want to leave it where it is - for other reasons within the vault. Please confirm, then I can troubleshoot further.
I know this can be fixed with a couple lines of code.
edit
Most probably this will work: .markdown-preview-view pre {white-space: pre;overflow-x:auto;}
The white-space:pre; keeps the intended line breaks, while white-space:nowrap; causes the whole block to render on one line (not good).
The overflow-x:auto; contains the output to the viewable area (your colored block), while allowing a horizontal scroll.
Ok, here’s what I’ve got. It’s doing pretty much what I want at this point. There’s some weirdness with very long non-breaking lines inside indented codeblocks (but this is probably just the way it works in CodeMirror)
This really looks like is should be the solution, but when I try it, although lines no longer wrap, it doesn’t add just one scrollbar for the codeblock — it adds a horizantal scrollbar for each line in the code block.
@scwunch Here’s what I’m using as of today with Obsidian 0.15.19. It disables wrap/adds the hscroll bar in Preview mode, but not in edit, which is what I want actually.
Do you (or anyone else) know if there is a way to get this to work in edit mode as well? Or would that require more than just a CSS snippet?
I would actually be okay with word-wrapping in code blocks in edit mode if the overflow kept the same indentation. My only concern is that when long lines get wrapped, it makes it look like one indented piece of code is split into two.
