Embedded notes share spacing settings as normal editor

Custom CSS & Theme Design
1

Hi there,

I’m looking to replicate the heading / list spacing that my theme sets in normal editor in embedded notes. Currently much greater spacing is used by default when embedding notes.

I’ve gotten close to that goal using the following snippet posted by arihen here.

.markdown-rendered div:has( > :is(p,pre,table,ul,ol)) + div > :is(h1,h2,h3,h4,h5,h6) {
    margin-top: 0;
    margin-bottom: 0;
}

This helps a ton, but it doesn’t seem to work when embedding a heading.

image
image740×834 24.2 KB

Is there a way I can get the snippet to also change top and bottom margin for embedded headings?

More generally is there an easier way to do what I’m trying to accomplish? I’m hoping that the embedded notes render using the same spacing settings as the note it’s embedded in.

2

For targeting embeds, you could try playing around with this snippet:

.internal-embed.markdown-embed :is(h1,h2,h3,h4,h5,h6) {
    margin-block: 0;
}

margin-block corresponds to margin-top and margin-bottom, so if the spacing is too tight with that, you could break them out:

.internal-embed.markdown-embed :is(h1,h2,h3,h4,h5,h6) {
    margin-top: 0.5em; /* a px value is fine here as well */ 
    margin-bottom: 0;
}

and adjust as desired.