Working with the HTML Preview

Markdown Monster's Preview Pane lets you check out what your markdown text will look like when it's rendered to HTML while you are entering text. The preview is updated whenever you briefly stop typing.

The editor has a few special commands that affect the way the preview pane is handled:

  • Preview Toggling
  • Preview Location (Internal or External)
  • Preview Refresh
  • Preview Scrolling

Preview Toggling

Markdown Monster's editor supports previewing of Markdown and HTML content as rendered HTML. The preview window can be toggled on and off in several ways:

  • F12 Shortcut Key

  • Preview Toggle in the top Window menu next to the close box

  • On the menu via View -> Html Preview

Any of these options will toggle the Preview Pane on and off if you are editing a Markdown, HTML or untitled (New) documents.

Markdown Monster supports editing a variety of text file formats, but on HTML and Markdown documents present the Preview Pane - for all others toggling has no effect and there is no preview pane.

Inline or External Preview Locations

By default the preview Window is located inline of the main Markdown Monster window:

Optionally you can also use an external window for the preview:

To switch between modes use:

  • Views->Internal Preview or Views->External Preview Window
  • The dropdown next to the Globe icon on the top right

Preview Refresh

In order to keep the editor responsive while typing the preview window is updated whenever you stop typing for ~1 second. This makes for optimal typing speed while still giving a reasonably real time text update for your Preview form.

You can also explicitly force the preview to refresh by Saving (ctrl-s) the current document, or by explicitly pressing the refresh key combo of Ctrl-Shift.

Preview and Editor Scroll Sync

The preview scroll position can also be optionally synced with the editor and vice versa. There are 4 options for syncing:

  • EditorToPreview
  • PreviewToEditor
  • EditorAndPreview
  • None

The setting can be configured in Settings with the PreviewSyncMode property or by using the rightmost statusbar icon dropdown:

EditorAndPreview Sync Mismatches

When you have preview mode to EditorAndPreview you may find that occasionally the preview or editor won't line up properly. This can happen when working with large images or code blocks (or any other non-text objects) when the previewer can't find an appropriate element to sync to.

For most common scenarios this isn't a big problem, but if you run into frequently you might be better off to use EditorToPreview sync mode rather than on EditorAndPreview. You can still scroll the preview by scrolling the editor achieving a similar, but more consistent sync experience.

© West Wind Technologies, 1996-2020 • Updated: 11/03/19
Comment or report problem with topic