Idmadmin: Created page with "Category:Coding tab 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 l..."

2018-09-19T17:05:44Z

Created page with "Category:Coding tab 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 l..."

New page

[[Category:Coding tab]]
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 view|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 [https://github.com/brokenhandsio/cmark-gfm GitHub Flavored Markdown] derivative of the [https://github.com/commonmark/cmark 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 <code>MARKDOWN_LANG</code> flag in the [[Wordfiles#Special_.22_LANG.22_language_flags|Special "_LANG" language flags]] section in the Wordfiles topic).

<div class="idm-see-also">
See also:
* [[Browser view]]
</div>

Live preview - Revision history

Idmadmin: Created page with "Category:Coding tab 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 l..."