+1 for this feature. The snippet works for readability, but the code is not centered and bleeds out of the background box.
I’m sure there’s more CSS trickery I could do (I tried setting overflow-x: auto; but it sticks a scrollbar in the middle of the codeblock lol) but I agree that this feels like it should be supported natively.
Here’s the weirdness that results with the overflow-x adjustment I mentioned:
I use obsidian a lot for saving old code, preparing for interviews etc. its super fast and super easy. but this is a huge impact on readability of code, i too am using the same hack as you, u just wish they come out with a fix sooner. It’s been 2 years i think.
Devs still doing great work tho. Loving how fast and stable the app is!!
In case it doesn’t break other things, I suggest putting all of a code block’s lines (HyperMD-codeblock) in a common parent DIV. That way, theme authors can add horizontal scroll and apply custom styling to the code blocks as a whole.
any updates on this guys? any idea when will we see horizontal scrollbars on codeblocks, or an adjustable size or something
anyone tell me whose balls do i have to fondle who do i need to talk to, to get a response
i’m tired of my codeblocks behaving like this in reader and live preview modes
It seems like this is not a popular enough feature request, so if you come across this thread because this problem is frustrating to you, please consider contributing to this thread, or creating another feature request i guess.
No devs bothered to respond to this either which is super odd 
I think it’s very problematic that in a live preview every line of code is a separate div. A “code block” is not really there, it’s just an appearance. So, you can hide the overflow, but then each long line of code will be scrolling separately, independently of the rest of the “code block”. Like in this screenshot, where I wheel-scrolled the middle line.
Here’s a small CSS snippet to add horizontal scrolling in preview mode (see previous comment regarding the situation for live-preview mode).
.markdown-reading-view code[class*="language-"] {
overflow-x: scroll;
white-space: pre;
}
Tested with default theme and Minimal theme.
I definitely would like to be able to use that feature. It’s really frustrating not to have the block being able to scroll
The amount of indentation that defines a codeblock is pretty exhaustively documented in the CommonMark spec. A large percentage of the examples in most sections mention spacing and codeblocks.
I agree that letting user choose about scrollbar presence would be nice, and more syntax highlighting by default in Live Preview would be fantastic. Turning everything red is not useful syntax highlighting.
Completely agree. Its pretty horrendous to read when you have loops in loops, especially for indent focussed languages like python. Horizontal scrolling would be amazing (but i think it would be important to be a switch so you can see how it would look otherwise in an export).
I too would love any dev response at all :))
Yes, support for horizontal scroll is all I need to move my code documentation over to Obsidian. Everything else discussed here is just “nice to have”.
True, I feel like Obsidian is truly limited because of its code related capabilities, the other day someone made a plugin to run your code snippet within obsidian, and get an output!! If obsidian starts to provide better support for codeblocks, the possibilities are endless!!
I tried the visible overflow for a while, but it doesn’t look neat. I ended up going back to overflow-x: scroll, like in my previous post. What I forgot to mention is I also use Hider plugin with “Hide scroll bars” turned on, to get rid of the scrollbars-in-the-code weirdness. This is the snippet I came up with, works for Live Preview mode:
.HyperMD-codeblock.cm-line
, code[class*="language-"]
, pre[class*="language-"]
{
white-space: pre;
overflow-x: scroll;
}
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.
Is this still planned?
Definitely would like this feature. Obsidian’s default behavior of wrapping code blocks makes it hard to use for programming-related notes.
I’ve started playing with Obsidian and really love it …except for the code-block width restriction so would love to see this implemented.
What’s the state of this request? Could this please be reviewed by the Obsidian team?
This should definitely be default for code-blocks. The wrap makes it look really not like it should!
We got an official reply from @WhiteNoise regarding scrollable code blocks, on Discord.
it can’t be easily done
it’s either the way it currently works
or the way table now works (that is you get a drastic change in rendering style once you are editing them)