Live preview: Better treatment of code blocks. Code Wrap, Horizontal Scroll and Smart Indent

The problems

  • If you write anything more than hello world code in obsidian, it wraps the code and completely destroys readability.

Well let me just write this code down for future reference so i can understand what it does and quickly get back to coding…

Oh well… This is not even that big of a codeblock, it looks big because its all wrapped up.

By far the biggest problem. I’m assuming im not the only one who is bothered by this seeing how techsavvy a lot of the obsidian audience is, surely people use it to store code snippets.

  • Pasting a codeblock in indented Bullet points is a nightmare to get it to work!!! Especially if you are a few indents in.

Video Demonstrating the problem
Video Demonstrating the problem

Additional Nice to Haves

  • Line Numbers that work with live-preview
  • Smart (indent aware) code editing.
  • Ability to Resize code font size alone, to make it fit better

I’m sorry if this has been posted before, I tried looking for it, but only found Threads from a year ago, before livepreview had rolled out.

If you can’t do anything pls add horizontal scrolling to text blocks if you can… Big improvement!

Otherwise Obsidian is the best tool I have used yet. And the possibilities are truly endless with it.

27 Likes

Don’t copy code that’s so wide! >:D

For now you should be able to work around it with a CSS snippet.

1 Like

LOL, It’s a shame really, coz it works so well when the code is the right length, and there is no nesting of codeblocks.

What CSS Snippet, have you got one? Because I have been looking high and low, and even talked to some of theme creators out there, they said they had been looking into implementing that feature but they were limited by the live-preview mode of obsidian;.

This appears to work in test vaults:

```css
.HyperMD-codeblock {
  white-space: nowrap;
}

.markdown-preview-view code {
  white-space: nowrap;
}
```

Angel

5 Likes

I fully agree with the rest of your post, but this one in particular also bothered me the most. I’m not 100% sure if it’s a limitation of Markdown itself that Codeblocks don’t display properly within indented bullet-point lists, but it sure does break apart my train of thought when I use a code-block within bullet-points.

According to this stackoverflow discussion you have to be really careful with the amount of indentations that you use. But it sure could be improved in terms of QoL.

3 Likes

yes exactly, I remember one day, I had had enough and i finally sat down to figure out the number of indents you had to do , for obsidian to recognise your code… as code… Now I do it all the time, but still super annoying.

Thanks for the tip, but unfortunately this still does not solve the problem.
Now my code does this, in live preview


But in Reader’s mode it remains the same, which is a big problem

Horizontal Scroll for Codeblocks is a pretty basic feature. They should definetely work on this.

Honestly super frustrating, been waiting for a fix for a year at this point. Also why isnt this a more popular request? To me this seems to be a glaring flaw.

5 Likes

+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:

4 Likes

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!!

1 Like

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.

1 Like

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

2 Likes

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 :person_shrugging:

1 Like

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.

1 Like

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.

2 Likes

I definitely would like to be able to use that feature. It’s really frustrating not to have the block being able to scroll

1 Like

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.

1 Like

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

4 Likes

I too would love any dev response at all :))

1 Like

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

5 Likes

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!!

3 Likes