快速開始
本頁說明如何安裝 NanoMD，並在頁面上建立第一組同步的編輯器與預覽器。
前置需求
| 項目 | 需求 |
|---|---|
| 瀏覽器 | 支援 ES2022 private class fields（#field）的現代瀏覽器（Chrome、Firefox、Safari、Edge） |
| Node.js | 只有從原始碼建置時需要 |
| 網路 | 載入時會自動從 CDN 引入 Material Symbols、Mermaid、code-prettify 與 NanoMD.css，見 執行期依賴 |
安裝
CDN
<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
npm i @pardnchiu/nanomd
ESM
import { MDEditor, MDViewer, MDParser } from "@pardnchiu/nanomd";
dist/NanoMD.esm.js 是同一份 bundle 尾端加上 export，匯出的仍是 window 上的類別；另外提供小寫別名 editor（= MDEditor）與 viewer（= MDViewer）。
從原始碼建置
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。
第一組編輯器與預覽器
<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-viewerclass；找不到元素時會建立一個未掛載的<section>，需自行插入 DOM（editor.body／viewer.body）- 預覽器透過
sync.editor綁定編輯器，之後每次輸入都會在sync.delay（預設 300 ms）後重新渲染
只需要轉換字串
不需要 DOM 介面時直接用 MDParser：
const html = new MDParser({ standard: false }).parse("# Title\n\n**bold**");
standard 預設為 true，會略過擴充語法（含 fenced code block），差異見 標準模式。