Live Preview: Better support of code blocks in lists

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

6 Likes

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

5 Likes

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!

3 Likes

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

1 Like

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

1 Like

Is that for dark-mode only?

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 */
}

No, it happens in light model as well.

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.

2 Likes

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.

1 Like

as much as i want to believe open source is faster, i don’t think it is. what makes it faster is availability of fund to hire more people. logseq is open source and i follow its development close. from what i can see, the progress isn’t any faster.

also, the core team of the open source would still control what feature get merged and released. ubuntu (main distro) is open source yet some key things what people want isn’t implemented (e.g. snap vs flatpak).

what open source provide of course, is the ability to fork and spawn your own version.

i’m very much invested for this feature to be implemented/fixed but i also think it should be given a fair argument. just my 2 cents.

2 Likes

When you start to think that, just remember Athens and Dendron (all have closed down). And you can see how well the open-source model is going on for Logseq (it’s not).

1 Like

Maybe don’t pick Clojure as a language if you want contributions from the community? :laughing: I would have contributed to Logseq if they hadn’t made that poor decision.

Where did you hear that Dendron shut down? Btw, they’ve also made questionable design decisions.

2 Likes

You can go to the announcement channel of Dendron or their GitHub issues where someone copied the announcement over.

This code works, but not completely.

I failed to remove these gaps. Any ideas?

1 Like

Gentlemen, the problem was announced almost 2 years ago!! When will it finally be fixed?

This is a critical bug that severely limits the possibilities of using this wonderful product

9 Likes

Ridiculous that this still has not been fixed yet.
Logseq and Typora have been doing this without a problem for years.

The CSS doesnt seem to work for me.
Although it “looks” kind of indented, when you copy out the code with the “copy” button in the upper right, all the code will be indented as well (all of the lines have an indent in front of them), which makes the code incorrect (you copy something in without indents and get something out with indents).
So this basically alters the code you put in there, which defeats the whole point of a codeblock.

6 Likes

Please… Obsidian has lot of amazing features, but this minor bug drastically reduces its usability for using outliner with code block. I hope bug will be fixed soon :pray:

3 Likes

+1 please

2 Likes

Please fix this!!!
I think there are a lot of programmers who use obsidian to organized there docs.
This bug ruin the experience of using obsidian.

1 Like