Increase spacing between text paragraphs, but not lists

Help
1

Hi all,
I found this nice CSS snippet which formats the spacing between text paragraphs.

Unfortunately, it also increases the spacing between (un)ordered lists. Is there an option to exclude lists?

Thanks for the help.

Cheers,
m

2

@mreiter it may sound a bit preachy, but if you are practicing creating new paragraph without empty line in between, you may end up with inconsistency with markdown best practices (see Paragraph | Basic Syntax | Markdown Guide). That’s because single line break (no empty line in between “paragraph”) will only create a line break (adding <br> tag) and will not create a <p> tag

that aside, here’s modified css to get what i think you intend

.markdown-source-view :is(.cm-line + .cm-line):not(.HyperMD-list-line) {
    padding-top: 1em;
}

with the snippet

image
image909Ă—443 21.7 KB

without the snippet

image
image894Ă—348 20.3 KB

1 Like
3

@efemkay
Firstly, thanks for the snippet, it works as intended =)

Also, thanks for pointing out the markdown best practices, I wasn’t aware of them.
To stay aligned with markdown best practices and still get the result that I’m looking for, is there a way to specify a different line height for empty lines then?

One more thing:
I’m using footnotes a ton. These lines all start with [^x]:, where x is a number. Would there be a way to exclude these lines, too?

4

you can simply add the css selector to exclude it. in this case the selector for footnote is .HyperMD-footnote

.markdown-source-view :is(.cm-line + .cm-line):not(.HyperMD-list-line, .HyperMD-footnote) {
    padding-top: 1em;
}
5

Thanks!
I tried applying the snippet to the reading view, too, like this:

.markdown-rendered :is(.cm-line + .cm-line):not(.HyperMD-list-line, .HyperMD-footnote) {
    padding-top: 0.75em;
}

But it doesn’t seem to apply to the reading view.

Could you quickly point out what the problem is here?

6

@mreiter obsidian has the edit/live preview css structure and selectors differently than that of reading view. so you cannot simply exchange .markdown-source-view with .markdown-rendered. for reference, .HyperMD-list-line is somewhat a <ul> but not exactly.

this is one of the “pitfalls” of not following the best practices. empty lines are used to identify new paragraphs but since we only use single line break, it doesn’t create a <p> tag but simply insert a <br> tag.

at this point i’m gonna tap out (since doing a hack against the convention will be messy :sob:). my advice is to have those empty lines and use css just to tweak the reading view to be consistent with edit/live preview (similar to the post linked below).

2 Likes
7

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.