# 預覽器選項

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

## 建構

```javascript
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"`，見 [主題](/theming) |
| `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` | 滾輪捲動同步，見 [渲染與同步](/rendering-and-sync) |
| `hashtag.path` | `string` | `""` | hashtag 連結前綴；空字串時不轉換，見 [Hashtag 連結](/hashtag-links) |
| `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 快照；目前渲染流程不使用 |

## 綁定與解除編輯器

```javascript
viewer.editor = editor;
```

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

## 單獨使用

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

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

已棄用的頂層選項（`pre`、`delay`、`scrollSync`、`tagPath` 等）見 [已棄用 API](/deprecations)。