Codeblock margin top and bottom

[haffy]

Steps to reproduce

Add this to a custom theme (CSS).

.app-container .workspace .cm-editor .HyperMD-codeblock.HyperMD-codeblock-begin {
    margin-top: 1rem !important;
}

.app-container .workspace .cm-editor .HyperMD-codeblock.HyperMD-codeblock-end {
    margin-bottom: 1rem !important;
}

Expected result

Add margins (top and bottom) to the codeblock

Actual result

This adds margin to the codeblock, but also makes the last codeblock non-selecteble.

Additional information

I think this codeblock in the app.css is the root cause of this, do not exactly know what it does. Maby this could be reviewed?

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

When I deactivate that in developer-tools with this code in my css file it works fine.

.app-container .workspace .cm-editor .HyperMD-codeblock.HyperMD-codeblock-begin {
    margin-top: 1rem;
}

.app-container .workspace .cm-editor .HyperMD-codeblock.HyperMD-codeblock-end {
    margin-bottom: 1rem;
}

Maby the app.css code can add somthing to it to be more specific if it is needed?

I have also tried many other ways to add a empty space before and after codeblock, that is what I want. But none works.

[dawni]

This gives you the same appearance while keeping the last line of the code block selectable:

.markdown-source-view.mod-cm6 .cm-content .cm-line:has(+ .HyperMD-codeblock-begin) {
	padding-bottom: 1rem;
}

.markdown-source-view.mod-cm6 .cm-content .HyperMD-codeblock-end {
    margin-bottom: 1rem !important;
}

The downside would be if the :has noticeably slows down your processes.

FYI, it seems that extending the margin above .HyperMD-codeblock-begin is the culprit, not the margin below .HyperMD-codeblock-end, because targeting the previous div and extending its bottom margin also caused the can’t-select issue. Hence my padding-bottom instead of a margin.

[dawni]

A method that uses neither :has nor code block margins came to me this morning, and I thought I was brilliant! But it turns out it leaves a little bit of unwanted background color.

You might be able to work with this to fix that piece of background:

.markdown-source-view.mod-cm6 .cm-content .HyperMD-codeblock-begin::before {
	content: "\A";
	white-space: pre;
	display: block;
	background-color: var(--background-primary);
}

.markdown-source-view.mod-cm6 .cm-content .HyperMD-codeblock-end + * {
	padding-top: 1rem;
}