# 快速開始

本頁說明如何安裝 NanoMD，並在頁面上建立第一組同步的編輯器與預覽器。

## 前置需求

| 項目 | 需求 |
|---|---|
| 瀏覽器 | 支援 ES2022 private class fields（`#field`）的現代瀏覽器（Chrome、Firefox、Safari、Edge） |
| Node.js | 只有從原始碼建置時需要 |
| 網路 | 載入時會自動從 CDN 引入 Material Symbols、Mermaid、code-prettify 與 `NanoMD.css`，見 [執行期依賴](/runtime-dependencies) |

## 安裝

### CDN

```html
<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@latest/dist/NanoMD.js"></script>
```

`NanoMD.js` 載入時會自行在 `<head>` 插入 `NanoMD.css`，不需要另外寫 `<link>`。三個類別會掛在 `window` 上：`MDEditor`、`MDViewer`、`MDParser`。

### npm

```bash
npm i @pardnchiu/nanomd
```

### ESM

```javascript
import { MDEditor, MDViewer, MDParser } from "@pardnchiu/nanomd";
```

`dist/NanoMD.esm.js` 是同一份 bundle 尾端加上 `export`，匯出的仍是 `window` 上的類別；另外提供小寫別名 `editor`（= `MDEditor`）與 `viewer`（= `MDViewer`）。

### 從原始碼建置

```bash
git clone https://github.com/pardnchiu/NanoMD.git
cd NanoMD
npm install
npm run build:once
```

`build:once` 依序產生 `dist/NanoMD.debug.js`、`dist/NanoMD.js`（terser 壓縮）與 `dist/NanoMD.esm.js`；`npm run build` 以 chokidar 監看 `src/` 並在變更時重跑；`npm run sass` 監看編譯 SCSS。

## 第一組編輯器與預覽器

```html
<section id="editor"></section>
<section id="viewer"></section>

<script src="https://cdn.jsdelivr.net/npm/@pardnchiu/nanomd@latest/dist/NanoMD.js"></script>
<script>
const editor = new MDEditor({
    id: "editor",
    defaultContent: "# Hello\n\nStart editing..."
});

const viewer = new MDViewer({
    id: "viewer",
    sync: { editor: editor, scroll: true }
});
</script>
```

- `id` 指向既有元素時，NanoMD 直接把該元素當容器並加上 `pd-md-editor`／`pd-md-viewer` class；找不到元素時會建立一個未掛載的 `<section>`，需自行插入 DOM（`editor.body`／`viewer.body`）
- 預覽器透過 `sync.editor` 綁定編輯器，之後每次輸入都會在 `sync.delay`（預設 300 ms）後重新渲染

## 只需要轉換字串

不需要 DOM 介面時直接用 `MDParser`：

```javascript
const html = new MDParser({ standard: false }).parse("# Title\n\n**bold**");
```

`standard` 預設為 `true`，會略過擴充語法（含 fenced code block），差異見 [標準模式](/standard-mode)。

## 下一步

- [架構](/architecture)：三個元件之間的關係
- [編輯器選項](/editor-options)、[預覽器選項](/viewer-options)
- [行內語法](/syntax-inline)：支援的 Markdown 語法