Things I have tried
I created a custom CSS file with this “tweak”, to reduce the line-spacing in code blocks from the default of 1.5 (and also to prevent long lines from wrapping; there are other visual issues with long lines with this “fix”, like the background color not extending to match the overflow, but at least code doesn’t get wrapped while editing). Anywhere, here’s the snippet:
.theme-light pre[class*="language-"],
.theme-dark pre[class*="language-"],
.cm-s-obsidian .HyperMD-codeblock {
word-wrap: break-word;
white-space: pre;
line-height: 1.3;
}
What I’m trying to do
I’m trying to get consistent font sizes and (reduced) line-spacing for code blocks in both edit and preview modes.
In edit mode, font-size
is set to 0.85em
(a relative size) via .cm-s-obsidian .HyperMD-codeblock
, but in preview mode, font-size
is set to 16px
from var(--font-normal)
.
Any recommendations on how to achieve consistent line spacing between edit and preview modes?