Obsidian is not showing codeblocks correctly indented in lists and I’m trying to fix it with CSS. I have a partial solution, but I can’t make it fully work, and I was wondering if someone else might see a solution.
Things I have tried
This is my current snippet:
/**
* -------------------------------------
* FIX: Codeblocks in lists
* -------------------------------------
*/
/* NOTE: THIS FIXES ONLY UP TO 3RD NESTED LEVEL!!! */
/*
* General codeblock fix: start of codeblock
* NOTE: the values might need changing with different font...
*/
/* Reset default base rule */
.cm-line.HyperMD-codeblock.HyperMD-list-line {
margin-left: calc(var(--list-indent) * 1 + 0.2em) !important;
width: calc(100% - var(--list-indent) * 1 + 0.2em) !important;
}
/* Level 2 List Codeblocks - Add extra alignment tweak */
.cm-line.HyperMD-list-line-2 ~ .cm-line.HyperMD-codeblock.HyperMD-list-line {
margin-left: calc(var(--list-indent) * 2 + 0.4em) !important;
width: calc(100% - (var(--list-indent) * 2 + 0.4em)) !important;
}
/* Level 3 List Codeblocks */
.cm-line.HyperMD-list-line-3 ~ .cm-line.HyperMD-codeblock.HyperMD-list-line {
margin-left: calc(var(--list-indent) * 3 + 0.8em) !important;
width: calc(100% - (var(--list-indent) * 3 + 0.8em)) !important;
}
/*
* General codeblock fix: indent fix
* NOTE: the values might need changing with different font...
*/
/* Hide the structural bullet indent span */
.cm-line.HyperMD-codeblock .cm-hmd-list-indent {
display: none !important;
}
/* Level 2: Pull text back by 1 tab step (28px) without altering span widths */
.cm-line.HyperMD-list-line-2 ~ .cm-line.HyperMD-codeblock {
text-indent: -28px !important;
}
/* Level 3: Pull text back by 2 tab steps (56px) */
.cm-line.HyperMD-list-line-3 ~ .cm-line.HyperMD-codeblock {
text-indent: -56px !important;
}
/* Ensure ALL spans render full pre-formatted whitespace for code indents */
.cm-line.HyperMD-codeblock span.cm-hmd-codeblock {
display: inline !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
white-space: pre !important;
}
This makes the codeblocks align nicely up to 3rd nested level (and obviously similarly further if desired), however, if I make a new list in the same note or continue the list, the text stays correctly indented (there might be a small difference, but looks decent), but the background is staying at level 3 nested level.
The issue with targeting different levels is that the codeblocks in lists are always .HyperMD-list-line-1, no matter what the actual nested level is. Does anyone have any ideas how to fix this?
It does the same as mine: the issue being if you have a codeblock at nested level 3 and then one at level 1, the block stays at level 3… It works as long as you don’t go back…
As for going only three levels, if you keep saying that as a proxy for any level, then ignore the rest of this. Just in case you mean literally the third level: Do you see the three dots “…” in the code. That’s for you to fill in the rest of the levels. I typed out the first three for you. And then the ellipses. Then added a level 11 so you could see how the pattern.
I managed to get it working. It’s painful, but I think I won’t need very large codeblocks nested in lists… but this actually works, now to level 4, but only up to 10 rows of code per block, because I got tired of copy pasting…
And yeah, I was mainly testing with 3 levels to have a proof of concept, but also I’m unlikely to need a huge amount of nesting, and seems this is a painful fix, so I think I’m happy with 4 levels and 10 lines of code…
I couldn’t bring myself to suggest that, but very glad you’re okay with it to at least that far.
There is a .HyperMD-codeblock-end that I was thinking of seeing if there’s a way to go until then—not directly, as CSS doesn’t have that, but indirectly maybe by :not(.HyperMD-codeblock-end) + whatever or something.
I tried the .HyperMD-codeblock-end, but I couldn’t get it working… it could be my css skills, though. I also ended up switching to the Codeblock Customizer plugin, which does make this easier. I just like to have fixes without plugins as well, because there’s no guarantee the plugins will be maintained.
To be fair, I generate my themes with sass, so I think this possibly could be automated, so that I don’t need to manually copy paste the insane lengths of selectors…
