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)
This is also needed with obsidian-krokit, which uses codeblocks to render text-like instructions to graphics. The images produced are too wide when readable line width is chosen with the default theme. Scrollbars are not displayed, so the rest of the rendering is never visible.
The ‘minimal’ theme does more of a usable thing, but it still looks a little wonky. Specifically, the image begins from where the text begins, but then expands beyond to the right. Scrollbars also appear. There appears to be something creating sufficient whitespace / padding on the left side to align with the text, but not on the right.
That said, it would probably be better if the default theme did not try to do any fomatting in the form of word wrapping, resizing, etc of the the contents of codeblocks, and displays them as rendered with scrollbars when needed.
I’m not presently touching any CSS, nor have I tried to look for how I can inspect it. This is just the builtin Light theme and the Minimal theme plugin in Light mode being used with obsidian-krokit, with Readable Line Lengths enabled.
well then we should talk with the theme-maker 
Blue Topaz is one that has some kind of way: “Non-wrap Codebox (Live Preview)”
You get a horizontal scrollbar, but for each and every line, which is too long!!! So completely useless for now 
I checked some other themes but couldn’t find one that has it 
Let me add here a quick note.
This is a much harder problem that it seems because there is only one real editor view. There are two options right now:
Specifically, codeblocks look like in reader (and you can have code wrap, horizontal scroll, prismjs highlight) but the moment you click anywhere to edit them they are “unpacked” to what you see now (with codemirror highlighting, no horizontal scroll, no code wrap).
We picked 1 over 2 because for codeblocks the gain you get is not worth the jarring effect.
It is understandably a technical challenge. I just really hope the team and community plans on looking into it long term 
. I just use the following hacks from this thread. Makes experience usable for me.
/*un-wrap code*/
.HyperMD-codeblock {
white-space: nowrap;
}
/*scroll codeblock in read mode*/
.markdown-reading-view code[class*="language-"] {
overflow-x: scroll;
white-space: pre;
padding: 15px 0px;
}
Loving using obsidian so far btw. Great Job u guys!!!
Seconding that this would be wildly helpful! I’m using a css snippet for something like this for now, but it’d be awesome for that to be a first-class citizen. Thanks!
Is there a solution?
Thanks and just FYI to anyone else reading, I tried this as a snippet and it’s working for me too. The code goes over the boundary of the grey code block, but it works well to disable to code wrapping.
not yet, but there are hacks and work arounds. We gotta make do till obsidian developers decide to provide better support for codeblocks
Here’s an even better solution, that partially fixes the code overflowing the background while editing and in live preview:
.HyperMD-codeblock {
white-space: nowrap;
min-width: calc(var(--line-width-adaptive) - var(--folding-offset))!important;
width: min-content!important;
}
.markdown-reading-view code[class*="language-"] {
overflow-x: scroll;
white-space: pre;
padding: 15px 0px;
}
for me the block in this case turns into individual lines of code which is undesirable
prev solution
your solution
The cursor was getting lost when editing long lines with my previous snippet, so I added :not(.cm-active) to it. Does not seem jarring to me. Works well in both Source Mode and Live Preview. (Remember to use Hider plugin with “Hide scroll bars” enabled.)
.HyperMD-codeblock.cm-line:not(.cm-active)
, code[class*="language-"]
, pre[class*="language-"]
{
white-space: pre;
overflow-x: scroll;
}
Currently Code blocks show the code in a wrapped text format, which makes it harder for codes having long lines/comments to read.
It would be great to have an option for wrap text/scrollbar so that longer codes can be easily read. Also an option to keep the editor width using would be great.
Allow better rendering of codeblocks inside indented lists. The code formatting of fences breaks when codeblocks are added at an indentation in lists.
Really want this to be obsidian’s top priority.