Why does editor look different in live preview mode and reading mode?

[amitgupta]

Please look at following GIF. The exact same content in live preview vs reading mode.

I work in live preview mode most of the time, however, the same content looks better in reading mode. The spacing, padding etc are configured more elegantly.

Is there any CSS hack to make them look exactly same? Idea is to never have to toggle “Reading” mode ever again ane truly enjoy WYSIWYG system. I like to often toggle to Reading view just to read from the well spaced version of my note.

[BarryPorter13]

Edit mode is the “Raw” Markdown area where you can make Edits to your file.
Live preview (or reading mode) is showing what the file looks with the Markdown
is displayed, no editing is allowed.

[CawlinTeffid]

I changed the post title to reflect the actual question. (Was: “Why does editor look different in edit mode and live preview mode?”)

You should be able to use the developer view to check the styles of each mode and copy the Reading Mode styles you want into a snippet for Live Preview.

Or you could do what I do and just type a blank line after headings so it looks good everywhere.

[amitgupta]

@CawlinTeffid Thanks for fixing the title.

So I ended up solving my problem by some CSS hacks here and there. I added some margin/padding to heading tags and it brought it very close to the preview mode.

[Slates320]

Good afternoon, I wonder if it would be possible for you to share your CSS hacks, because I also want to achieve this, and I’m a newbie in terms of programming.

Thanks in advance

[aboode95]

The following code is a good place to start.

You could also look up for the following settings in the CSS file of your current theme and change accordingly. Or make a css snippet.

This is what I use in my css snippet. Hope this helps!

.mod-cm6 .cm-editor .HyperMD-header-1 {
  padding-bottom: 40px;
}
.mod-cm6 .cm-editor .HyperMD-header-2 {
/*   padding-top: 40px; */
  padding-bottom: 40px;
}
.mod-cm6 .cm-editor .HyperMD-header-3 {
  padding-top: 0.5em;
  padding-bottom: 35px;
}
.mod-cm6 .cm-editor .HyperMD-header-4 {
  padding-top: 0.5em;
}
.mod-cm6 .cm-editor .HyperMD-header-5 {
  padding-top: 0.5em;
}
.mod-cm6 .cm-editor .HyperMD-header-6 {
  padding-top: 0.5em;
/*   padding-bottom: 40px; */
}