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.
1 Like
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;
}
3 Likes
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;
}
Use case or problem
Currently Code blocks show the code in a wrapped text format, which makes it harder for codes having long lines/comments to read.
Proposed solution
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.
Related feature requests
Allow better rendering of codeblocks inside indented lists. The code formatting of fences breaks when codeblocks are added at an indentation in lists.
4 Likes
Really want this to be obsidian’s top priority.
8 Likes
I’m a relatively new Obsidian user so I’m sure to some extent this is my own inexperience with CSS talking but I can’t get the CSS snippet work arounds to work. Not sure if there are alternative ways to upvote this feature request besides commenting on here but yeah I have been loving using Obsidian up until now but the lack of horizontal scroll on code blocks is extremely frustrating. Strange that from what I could find online it used to be possible and now isn’t anymore, please bring back this feature! 
1 Like
I really want this feature too. I have been using obsidian for a long time, first for learning programming and taking lecture notes, and now for working as a programmer 
Therefore, this is incredibly important for me
But in older versions this feature was. Well, it looks like they had a good reason to temporarily abandon it, but the feedback from the developers is encouraging that work is underway.
5 Likes
A separate scroll bar for code blocks in live preview would be nice.
1 Like
This is definitely a pain point 
2 Likes
Hope to fix it soon, Thanks
I recently purchased a Sync subscription along with Catalyst and invested considerable time in configuring my vaults. Unfortunately, I just encountered this bug now, after finally migrating all my notes from a few different apps, and it severely impacts my workflow. Given that I write code for a living, the inability to properly read and edit code snippets is a deal-breaker for me. As a result, I’ll be canceling my subscription.
I was disheartened to learn that resolving this bug is a challenging task. I genuinely enjoyed using Obsidian otherwise, and it’s disappointing to have to leave due to this issue.
To illustrate the problem, consider the following table. Despite trying various CSS “workarounds,” word wrapping makes it unreadable and impossible to edit:
NAME PROVISIONER RECLAIMPOLICY VOLUMEBINDINGMODE ALLOWVOLUMEEXPANSION AGE
local-path (default) rancher.io/local-path Delete WaitForFirstConsumer false 206d
longhorn (default) driver.longhorn.io Delete Immediate true 16h
Live Preview mode
Reading mode
I’ll be monitoring updates on this issue. If it’s resolved, I’d be more than happy to return as a subscriber.
Editing Mode 是最好用的
1 Like
I’ve been able to circumvent the issue with the following snippet:
.HyperMD-codeblock.HyperMD-codeblock-bg.cm-line {
width: 1000px;
max-width: 1000px !important
}
Unfortunately, it’s fixed width. but 1000px seems to be enough to read all of my long code
This hasn’t been fixed. A definite pain point for most of the programmers who use Obsidian, and frankly that number should be big!
6 Likes
I didn’t have time to try out vscode editor yet, but hope it’ll improve both code rendering and editing
Sadly no fix yet…
Try out my plugin Code Styler: GitHub - mayurankv/Obsidian-Code-Styler: A plugin for Obsidian.md for styling codeblocks and inline code
It doesn’t solve everything but it definitely helps with things like unwrapping code in reading mode. I also hope to mitigate some of the existing issues by adding things like line wrap indentation and wrap indicators in editing mode so wrapped lines are obvious. It also has a number of other out of the box nice features, feel free to check it out.
This thread partially inspired me to make this and every issue raised in this thread is ideally one I’d like to solve so if I can come up with solutions to any of the other issues, they will be added to the plugin in the future.
1 Like