Synchronize the HTML-Preview

[Sci-Mon]

A synchronization of the HTML preview would be a fine thing.
E.g. take the actual shown mardown-text of the editor and render it into HTML-Preview. You might be able to even delete the scrollbar because not needed anymore...

I've seen this a windows app (was that markdown pad?)

Another way might be to scroll the preview automatically to the correct position, however that can be solved.

I see that this might not be a simple task because the editor-font and the preview-font may differ...

[ewen-r]

+1 to this suggestion.
Unless I am missing something, the preview window and editor window positions are not in sync and I would very much like to have that.

[xh542428798]

+1 to this suggestion.

[actuallynotjohndoe]

+1

[Ardemus]

Agreed. It's worse for me on 24.02.2. In addition to what you describe, the preview scrolls itself all the way up when I make changes near the bottom of the markdown so it scrolls away from the part of the document I'm editing and I have to keep manually scrolling back down.

However the feature requires some non-trivial design decisions. The markdown and preview elements necessarily occupy different amounts of vertical space, and it's not consistent. In this screen shot both sides are synced at the top of the window (not captured):

So, which part of the markdown should align with the preview?

• The top of the visible markdown?
• The markdown at the center of the screen?
• The markdown at the cursor?
• The most recent Header?
• The top of the current list/code block/paragraph?
• Some combination / heirarchy of conditions?
• Some sort of kerning-like operation to subtly change text size and line spacing so they do line up?
  • Do you allow adjustments to the preview or keep it WYSIWYG?
  • Do you go to extremes if necessary, or stop at a certain point?
• Break WYSIWYG in the preview by adding vertical space to both sides as needed so the top of each element lines up (like some diff utilities)?
• Keep the WYSIWYG but cut both sides into strips and insert gaps that are obviously not part of either?
• ...

Do you shrink one display area so they both contain the same content?
Do you use lines to connect the source to the preview like other diff utilities?

I definitely want them to stay synced, but it'd take work to decide how they sync.

[Sci-Mon]

I really appreciate your reply and the deep thoughts about the design decisions. I can imagine that it is almost not possible to realize a perfect WYSIWYG editor including the HTML preview.

I you have a look at this screenshot, both editor and preview window have a scrollbar. It seems that the preview is scrolling only a little because the preview font is probably a bit too large. (But you might leave that issue to the users to choose their preferred font- and size)

Another difficult task would be to display the second half of a nested list of the visible markdown... Probably, it makes still sense to keep things simple and stupid at first and probably code such details later on.

For me it would be most natural to show the top of the visible markdown in synch and scroll the preview if needed.
Another idea might be to just 'zoom' the preview somehow, until no scrolling is needed - although I cannot think of how to solve that exactly... Probably dynamically select the proper fontsize...

[AFlowOfCode]

This would be a lovely feature for a lovely editor.

I agree that some design thought would be required, but it could also be implemented in a simplistic way for uncomplicated situations as an opt-in feature. I don't feel like it has to strictly match up line to line to be more helpful than it is now. It could be labeled "beta" (especially if further refinement was being planned), or just "basic" to keep expectations low.