Disable word wrap for code blocks?

[luckman212]

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:

Does anyone know if it’s possible to control that background box and what property to look at? Or is this a dead end? Thanks!

[Nebucatnetzer]

This would be the related feature request I think.

Allow code blocks to be wider than the normal text

When you add a wide code block Obsidian wraps the content to match the line length when “Readable Line Length” is activated. This makes it hard to read the code. A nicer way would be to provide a scroll bar underneath the code block and let it keep its full width.

[ryanjamurphy]

This seems to be the solution:

How do I wrap text in a pre tag?

(The nice thing about CSS styling is that every question you can imagine has probably been asked on Stack Overflow or CSS Tricks.)

[luckman212]

@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.

[ryanjamurphy]

Oh, sorry. Then changing the white-space property should do it:

    white-space: nowrap;

white-space: pre; also works on my end.

The other changes would have to apply to the code block itself. Inspecting Stack Overflow itself offers some hints:

[luckman212]

@ryanjamurphy

white-space: pre; also works o

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…

[Erisred]

@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.

[Silver]

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]

To me it would be great to have a complete example.

[Erisred]

@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.

[luckman212]

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.

[Erisred]

@luckman212 - No custom css? Interesting, I don’t have the same outcome. Could you post the code block from your example?

[luckman212]

@Erisred Sorry yes—I have custom css, just not using an entire theme.

[Erisred]

To help, then, I would need to know what css you have related to the pre element. Something is messing with your blocks.

[Erisred]

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.

[luckman212]

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)

:root {
	--color-monospace: khaki;
}

.markdown-source-view {
	font-family: var(--font-monospace);
}

code, pre {
	word-wrap: break-word;
	white-space: pre;
	overflow-x: auto;
	font-size: 0.95em;
	line-height: 1.5;
}

.markdown-preview-view code,
.cm-s-obsidian .HyperMD-codeblock,
.cm-s-obsidian span.cm-inline-code {
	color: var(--color-monospace);
	-webkit-font-smoothing: auto;
	font-size: 0.95em;
}

.cm-s-obsidian .HyperMD-codeblock {
	line-height: 1.5;
}

Looks like this:

[Erisred]

@luckman212

It’s doing pretty much what I want at this point.

Perfect!

Inline code indeed has its own rules - your code makes them look similar, but the Markdown spec is the reason they aren’t identical.