預覽器選項

本頁列出 new MDViewer(config) 的選項、實例方法與屬性，以及綁定編輯器的方式。

建構

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" }
});

建構完成時會立即呼叫一次 init()。

選項

選項	型別	預設	說明
`id`	`string`	無	容器元素 ID；找不到時建立未掛載的 `<section>`，用 `viewer.body` 取得
`emptyContent`	`string`	`""`	沒有 `txt` 參數、編輯器也沒有文字時渲染的 Markdown
`style.mode`	`string`	`"auto"`	`"auto"`／`"light"`／`"dark"`，見主題
`style.fill`	`boolean`	`true`	寫入 `data-fill`，填滿父元素
`style.fontFamily`	`string`	`"sans-serif"`	以全域 `.pd-md-viewer` 選擇器插入 `<style>`；同頁多個預覽器時後者覆蓋前者
`sync.editor`	`MDEditor`	`null`	綁定的編輯器；不是 `MDEditor` 實例時視為未綁定
`sync.delay`	`number`	`300`	渲染延遲毫秒數；`0` 或無法解析的值回到 `300`
`sync.scroll`	`boolean`	`false`	滾輪捲動同步，見渲染與同步
`hashtag.path`	`string`	`""`	hashtag 連結前綴；空字串時不轉換，見 Hashtag 連結
`hashtag.target`	`string`	`""`	`"_blank"` 開新分頁，其他值一律 `_self`

方法

方法	說明
`init(txt = "")`	排程一次渲染；`txt` 有值時渲染 `txt`，否則讀取編輯器文字或 `emptyContent`
`clear()`	清空容器內容
`unsave()`	把 `data-saved` 設為 `0`
`changeMode(mode = "light")`	直接寫入 `data-mode`；`"dark"` 為深色，其他值（含空字串）為淺色

屬性

屬性	型別	說明
`body`	`HTMLElement`	預覽器容器
`editor`	`MDEditor`	綁定的編輯器；可在建構後指定
`vbody`	`vDOM`	容器的虛擬 DOM 快照；目前渲染流程不使用

綁定與解除編輯器

viewer.editor = editor;

設定 editor 時會同時把 editor.viewer 指回此預覽器，並依 sync.scroll 設定滾輪同步。改綁另一個編輯器時，先前編輯器的 onwheel 會被清除。設為 null 只會清除先前的 onwheel，內部仍保留舊編輯器參照，渲染時會繼續讀取它的文字。

單獨使用

不綁定編輯器時，預覽器就是一個 Markdown 渲染容器：

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

已棄用的頂層選項（pre、delay、scrollSync、tagPath 等）見已棄用 API。