Give code block a margin top

[dkrev]

Use case or problem

I need to customize the editor code block margin-top however there is no selector on that DOM. It looks like too dense:

Look at how bear note handle this style:

The gap between the text and the top of code block border is more comfortable in Bear note.

Proposed solution

Adding a css selector to the code block DOM?

[RFNzNayjGHMYBgwpPE47]

Pretty new to Obsidian, only 1 day (just heard about it yesterday for the first time). Pondering a move from Bearapp to Obsidian. Hopefully this will be helpful to you and others:

Set line height all lines to 1rem and add bottom padding to each line of 0.8rem.

.CodeMirror pre.CodeMirror-line {
    font-family: var(--font-family-editor) !important;
    line-height: 1rem;
    padding-bottom: 0.8rem;
}

Revert bottom padding in the code block and add a bit of padding to the left and increase the line height, since we no longer have the bottom padding.

.cm-s-obsidian pre.HyperMD-codeblock {
  padding-bottom: 0 !important;
  padding-left: 1rem !important;
  line-height: 1.6rem !important;
}

Finally, a couple of bonus tweaks to give the top tics some padding and change their colour

.cm-s-obsidian pre.HyperMD-codeblock-begin  {
  padding-top: 0.5rem !important;
}

.cm-s-obsidian pre.HyperMD-codeblock span.cm-formatting-code-block {
    color: orange !important;
}

And this is what it looks like:

Theme: Night Owl
Font: Fira Code

Not really trying to mimic Bear, just learning at this point, and seeing what Obsidian can do. If there is an easier way to accomplish, please feel free to chime in.