Live Preview: Better support of code blocks in lists

[kawadumax]

+1
this issue is the only bad point

[MadSeche]

+1
Actually, I’m pulling my hairs off my head trying to put CodeBlock into list.
It’s bugged as hell.
Took this app to write faster and better notes with the markdown support.
Actually here I’m loosing Hours trying to fix the mess…

Edit 1 : I Found a temporary fix, gonna smoke another cigarette and then post it in Edit 2.

[smartguy1196]

Not sure why Obsidian’s editor mode struggles with embedded markdown in any kind of indented md, but this definitely feels inline with the issues that callouts are having

[MadSeche]

Edit 3 : This is the behavior I have in screenshots and a ´fix´ for CodeBlock in Lists.
Notes that I am working on the Intel Mac version on Ventura 13.1.

[MadSeche]

And a reply to my post to say, if your trying to copy/past in CodeBlock that are in list, your in for some other troubles… (at least I am).
No matter if you command+v or command+shift+v.
I just quit trying to use CodeBlock in List as for now, the behavior made me lose 8 hours of my time.

[MadSeche]

Hello. For those still struggling with the behavior of codeBlock in list, I found this post and it helped me a lot to incorporate correctly.

Also what helped me to prevent wonky behavior when you copy/paste code in a codeBlock that is in a list is to activate ´Scroll long lines´option in Style Setting plugins.
That way you can control the behavior in editing more without weird display behavior.
This imply you are using the Minimal Theme Settings plugin + its Style Setting.

[MatAmo]

The current state of the code blocks in live View is pretty bad.
As a coder who stores a lot of code snippets in my note, I am really questioning if obsidian is the right software for this

Does somebody know if there is currently development ongoing or planned to fix this situation?

[jeromyz]

This is an intolerable error, please be sure to fix it asap…

[tyleroz]

This is indeed a serious bug that deserves its reputation as the top bug report of all time. Come on guys, time to send it to the graveyard!

My cumbersome workaround is keeping code blocks stashed at the bottom of a file, then copy-pasting block embeds into a list.

This way, I can properly indent code blocks. But this is rather time-consuming, and it is easy to get lost as the page gets longer.

It would be great if this bug could be addressed so that Obsidian could reach its full outlining potential.

[mbigras]

Summary

I also care about this issue, since I can’t easily render nested code blocks while editing in Obsidian. Indenting code blocks in lists is such a useful technique for technical documentation, since you can group and organize complex commands or code snippets—aids readability.

For example, consider the following Reboot your server illustrative procedure:

Reboot your server

The following procedure describes how to reboot yourserver web server.

1. Connect to your server.

   ssh yourserver
   

   Note: If you leave out your username, then the ssh command defaults to your current username—the one in your USER environment variable.

2. Reboot your server.

   reboot
   

   Consider the following details:

   1. Insight: Rebooting your server applies industry standard troubleshooting technique.
   2. Gotcha: If you reboot your server during business hours, then all your apps will go down—major bummer.

Markdown reference

I easily (it’s not really easy since I needed to manually type 3 spaces (a pattern I haphazard
realized through trial and error)) rendered that Markdown in this forum Markdown renderer with the following Markdown:

1. Connect to your server.

   ```
   ssh yourserver
   ```
   **Note:** If you leave out your username, then the `ssh` command defaults to your current username—the one in your *`USER`* environment variable.

1. Reboot your server.

   ```
   reboot
   ```
   Consider the following details:
   1. **Insight:** Rebooting your server applies industry standard troubleshooting technique.
   1. **Gotcha:** If you reboot your server during business hours, then all your apps will go down.

Consider the following details about that Markdown:

1. Observation: Notice that you can clearly see which notes, insights, and gotchas correspond to which command—excellent!
2. Observation: Notice the surprising mechanism to actually render the nested codeblocks: I put 3 spaces in front of the code fences.
3. Guess: This Obsidian problem is related to confusion about how to actual render nested code blocks in Markdown and for details about those Markdown challenges, see Fenced code blocks inside ordered and unordered lists gist comment and CommonMark Spec docs.

Conclusion

Nested code blocks are great for readability; but hard to actually type. The root cause might be related to the confusion about the Markdown spec—see Fenced code blocks inside ordered and unordered lists gist comment and CommonMark Spec docs.

[Zentropy]

I don’t have much to add that hasn’t already been said, but add me to the tally of people leaving Obsidian for Typora over this long-standing bug. How has this existed for years?

Thanks to whoever above mentioned Typora, as it does work flawlessly

[Gamuza]

It has been one year since I switched from Obsidian to Notion just because of this bug.
Sometimes I go back to check whether the code block preview is fixed, but it always remains the same.
Obsidian even changed its icon and released a brand new version, starting from 1.
Why don’t you fix this problem instead of continuing to ignore this request?
I think there are a lot of engineers using Obsidian.
It is very important for this bug to be fixed.
I am so sad and disappointed because I really like Obsidian

[m0rtyn]

Hi, I fix appearance of the nested code blocks with custom CSS:

I hope it will be useful for someone:

/* ### fix for nested codeblocks in obsidian */
.HyperMD-list-line ~ .HyperMD-codeblock:has(.cm-indent) {
  margin-left: 3em !important;
  background-color: #000 !important;
}

.HyperMD-list-line ~ .HyperMD-codeblock .cm-indent:first-child {
  display: none !important;
}

.HyperMD-codeblock.HyperMD-codeblock-begin.HyperMD-codeblock-begin.HyperMD-codeblock-begin,
.HyperMD-codeblock.HyperMD-codeblock-end.HyperMD-codeblock-end.HyperMD-codeblock-end {
  padding-top: 0 !important;
  padding-bottom: 0.3em !important;
  line-height: 0.8em !important;
  background-color: transparent !important;
}

.HyperMD-codeblock.HyperMD-codeblock-begin.HyperMD-codeblock-begin.HyperMD-codeblock-begin .cm-formatting,
.HyperMD-codeblock.HyperMD-codeblock-end.HyperMD-codeblock-end.HyperMD-codeblock-end .cm-formatting {
  font-size: 0.65em !important;
}

.HyperMD-codeblock-begin + .HyperMD-codeblock {
  border-radius: 1rem 1rem 0 0 !important;
}

.HyperMD-codeblock:has(+ .HyperMD-codeblock-end) {
  border-radius: 0 0 1rem 1rem !important;
}

Visual result:

I have to fix corner cases, but it works!

[m0rtyn]

Fixed snippet with screenshots: obsidian-fix-for-nested-code-blocks.css · GitHub

[efemkay]

Hey there. This is great. I had my attempts on the CSS but yours are more elegant

[obsequious]

Is that for dark-mode only?

[m0rtyn]

It’s possible to customize color for any theme. You can change the color hex code at the first line to a lighter color:

.HyperMD-codeblock {
  --code-background: #0001; /* <== E.G #0001 */
}

[Gamuza]

No, it happens in light model as well.

[rockmanvnx6]

I couldn’t agree more, the code block fixing isn’t even on the planned release. I wouldn’t need PDF annotation, 2FA or even table editing. All I’m asking is a working code block in bullet points for my notes.

[obsequious]

I’m starting to think that all those advocating for Obsidian to be open source are right. There’s just no time for the small Obsidian dev team to handle all the different issues that plague Obsidian users. Open source would have solved this problem.

Maybe it’s time for API-compatible open-source version of Obsidian to come out.