Margin with codeblock

Help
1

Hello,

I’am new to Obsidian and I’am surprised that the new editor doesn’t add margin top/bottom to codeblocks. In Reader mode, no problem, but in editor everything is too close.

Editor
Editor1466×752 79.6 KB

I don’t find a good css to solve the problem, don’t know if it’s a bug…

Thanks :wink:

2

If you are unsure if it’s a bug, please post to help section.

1 Like
3

I’m just creating my own theme and also noticed it’s difficult to add margins in the source mode, because the original theme set zero margins as important for any content.

.markdown-source-view.mod-cm6 .cm-content > * {
  margin: 0 !important;
  display: block;
}

And when I try to force some positive margins, it breaks the line numbering alignment :cry:

A possible workaround could be to add invisible borders (with bg color) to the code blocks like this:

.markdown-source-view.mod-cm6 .cm-content .HyperMD-codeblock-begin {
  border-top: 1em solid var(--background-primary);
}
.markdown-source-view.mod-cm6 .cm-content .HyperMD-codeblock-end {
  border-bottom: 1em solid var(--background-primary);
}

Or just add some padding to headings like this:

.markdown-source-view.mod-cm6 .cm-content .HyperMD-header {
  padding-top: 1em;
  padding-bottom: 1em;
}

It seems that paddings are safe and don’t break the line numbers.

4

It’s not advisable to use margin top bottom in editing view (source mode or LP). See post here.