Difference between revisions of "Live preview"

Latest revision as of 17:05, 19 September 2018

Clicking the Live preview option in the "Coding" tab toggles a split view of the active HTML or Markdown file with the plain text source in the left pane and a browser preview in the right pane.

While in live preview mode, you can edit the source file on the left, and the changes will be automatically reflected in the rendered preview on the right, whether or not you've saved those changes to the file. This provides WYSIWYG-like editing for HTML and Markdown where you can see what your changes will look like in a web browser as you make them.

Positional sync

Live preview also supports a positional sync feature. This feature allows you to double-click on an element in the rendered browser preview and jump to the position of that element on the source view side. Note that this doesn't work for dynamically created elements (elements inserted into the DOM via JavaScript).

Markdown rendering

Live preview uses the GitHub Flavored Markdown derivative of the CommonMark (cmark) library to interpret and render Markdown. Markdown files are processed through this library, and the resulting HTML is used to display it on the browser side. This library includes support for GitHub-specific Markdown elements like tables, special link styles, strikethrough text, and more.

Additionally, live preview supports different rendering styles (CSS) for Markdown. You can access these by clicking the drop down under the live preview button in the "Coding" ribbon. Several defaults are provided, but you can also use the Add/remove style options to add your own CSS stylesheets for previewing Markdown. These style options are only available for files that are syntax highlighted as Markdown (see documentation for the MARKDOWN_LANG flag in the Special "_LANG" language flags section in the Wordfiles topic).