obsidian-fix-for-nested-code-blocks.css

obsidian-fix-for-nested-code-blocks.md

Fix for codeblocks nested in list items in Obsidian app

Result:

.HyperMD-codeblock {
  --code-background: #0003;
}

.HyperMD-list-line-nobullet ~ .HyperMD-codeblock:has(.cm-indent) {
  margin-left: 3em !important;
  background-color: var(--code-background) !important;
}

.HyperMD-list-line-nobullet ~ .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;
}