Viewer Options

This page lists the options, instance methods and properties of new MDViewer(config), and how to bind an editor.

Construction

const viewer = new MDViewer({
    id: "viewer",
    emptyContent: "# Nothing yet",
    style: { mode: "auto", fill: true, fontFamily: "sans-serif" },
    sync: { editor: editor, delay: 300, scroll: true },
    hashtag: { path: "/tags/", target: "_blank" }
});

The constructor calls init() once before returning.

Options

Option	Type	Default	Description
`id`	`string`	None	Container element ID; if not found, a detached `<section>` is created; get it from `viewer.body`
`emptyContent`	`string`	`""`	Markdown rendered when there is no `txt` argument and the editor has no text
`style.mode`	`string`	`"auto"`	`"auto"` / `"light"` / `"dark"`; see Theming
`style.fill`	`boolean`	`true`	Written to `data-fill` to fill the parent
`style.fontFamily`	`string`	`"sans-serif"`	Inserted as a `<style>` with the global `.pd-md-viewer` selector; with several viewers on a page, the last one wins
`sync.editor`	`MDEditor`	`null`	The editor to bind; anything that is not an `MDEditor` instance counts as unbound
`sync.delay`	`number`	`300`	Render delay in milliseconds; `0` or an unparsable value falls back to `300`
`sync.scroll`	`boolean`	`false`	Wheel scroll sync; see Rendering and Sync
`hashtag.path`	`string`	`""`	Hashtag link prefix; an empty string disables conversion; see Hashtag Links
`hashtag.target`	`string`	`""`	`"_blank"` opens a new tab; any other value means `_self`

Methods

Method	Description
`init(txt = "")`	Schedules a render; renders `txt` when given, otherwise the editor text or `emptyContent`
`clear()`	Empties the container
`unsave()`	Sets `data-saved` to `0`
`changeMode(mode = "light")`	Writes `data-mode` directly; `"dark"` is dark, any other value (including an empty string) is light

Properties

Property	Type	Description
`body`	`HTMLElement`	The viewer container
`editor`	`MDEditor`	The bound editor; can be assigned after construction
`vbody`	`vDOM`	Virtual DOM snapshot of the container; unused by the current render path

Binding and Unbinding an Editor

viewer.editor = editor;

Assigning editor also points editor.viewer back at this viewer and sets up wheel sync according to sync.scroll. Rebinding to another editor clears the previous editor's onwheel. Assigning null only clears the previous onwheel; the old editor reference is kept internally and its text is still read on render.

Standalone Use

Without an editor, the viewer is simply a Markdown rendering container:

const viewer = new MDViewer({ id: "viewer" });
viewer.init("# Title\n\nRendered **once**.");

Deprecated top-level options (pre, delay, scrollSync, tagPath, ...) are listed in Deprecations.