Differing font size/line spacing for code blocks in "Edit" and "Preview" modes

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?

Still hoping for a response before this gets closed… :grimacing:

1 Like

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