For the height of a and the height of b marked in the picture above, is it possible to set different values for them respectively with some customized CSS code, and how?
the following post is inspiring.
I found a solution and the code is posed below.
.CodeMirror pre.CodeMirror-line {
line-height: 1.4;/*height of a*/
padding-top: 6px; /*the lower part of height of b*/
padding-bottom: 6px;/*the upper part of height of b*/
}
And the code for adjusting the height of the list item in Preview mode is:
li{
padding-top: 6px;
padding-bottom: 6px;
line-height: 1.4;
}
5 Likes
The same question occurred to me, since I am learning CSS. Thanks for the snippets.
Thank you very much for the code! I needed exactly what OP asked for. Is it possible to achieve the same (different height of a and b) in the markdown preview?
With this snippet for edit mode:
.CodeMirror pre.CodeMirror-line {
line-height: 1.4;/*height of a*/
padding-top: 6px; /*the lower part of height of b*/
padding-bottom: 6px;/*the upper part of height of b*/
}
you may also want this snippet to adjust the output in the preview mode:
p{
line-height: 1.4; /* change this value accordingly */
display: block;
padding-top: 6px; /* change this value accordingly */
padding-bottom: 6px; /* change this value accordingly */
margin-block-start: 0em;
margin-block-end: 0em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
-------------- after upgraded to 1.0.0, I use the following css snippet to adjust the font size and line height -----
body{
--font-smallest: 0.8em;
--font-smaller: 0.9em;
--font-small: 1em;
--font-ui-smaller: 14px;
--font-ui-small: 16px;
--font-ui-medium: 18px;
--font-ui-large: 20px;
--line-height-normal:1.4;
--line-height-tight:1.2;
}
5 Likes
This worked great for me. But one thing I noticed is when I have a blockquote followed by a newline/new paragraph, it looks like it’s still catching the next paragraph within the blockquote, based on the formatting.
All I’ve added is a single snippet with the two listed style definitions above for pre.CodeMirror-line and p…
Any ideas what I could add to avoid this?
Thanks for this! The first snippet worked for me in edit mode, but the second one is not working for preview mode. I’m new to this, so I’m sure I’m doing something wrong. But, I tried a series of different attempts (combining both into one snippet, only doing the second one, etc) but no matter how I try, the second one doesn’t change anything.
May be hit enter twice to separate blockquote and paragraph ?
May be replace the 2nd one with this?
br {
display: block;
content: “”;
margin: 2em;
}
The br tag can not be styled with CSS (for reasons, google)
I was able to get nice paragraph spaces in edit mode with this:
/*Add Paragraph Spacing in edit mode*/
.markdown-source-view.mod-cm6 .cm-line{
padding-bottom:16px;
}
Example in edit mode
However i am unable to add any paragraph spacing in view mode. I have inspected the code and apparently Obsidian puts together multiple paragraphs into one single p element - which makes it impossible to me to add spacing to the individual paragraphs. Has anyone had any success with this?
Example in view mode
2 Likes
@manuelwill
this is cool, is there also a way to apply this only to “regular” paragraphs, but display lists and numbered lists separately? I’d like to add spacing between paragraphs, but add none to (numbered) lists.
1 Like