Better treatment of code live preview. Code Wrap, Horizont Scroll and Smart Indent

[xidl]

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

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.

[CawlinTeffid]

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

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

[xidl]

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

[Angel]

This appears to work in test vaults:

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

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

Angel

[Criamos]

@xidl

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

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.

[xidl]

@Criamos

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.

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.

[xidl]

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

An improvement for sure… but still

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