架構
本頁以一張概覽圖說明 NanoMD 的三個元件、它們共用的轉換管線，以及原始碼的分層方式。
系統概覽
graph LR
User[使用者輸入] --> Editor[MDEditor]
Editor -->|"init() 觸發重新渲染"| Viewer[MDViewer]
Viewer -->|"讀取編輯器每一列文字"| Editor
Viewer -->|Markdown| Trans["transToHTML()"]
Parser[MDParser] -->|Markdown| Trans
Editor -->|"download('html')"| Trans
Trans -->|HTML 字串| Viewer
Trans -->|HTML 字串| Parser
Trans --> Funcs["set* 轉換函式<br/>src/function/"]
三個元件都不自己解析 Markdown，全部呼叫同一個 transToHTML()。差別在呼叫時帶入的參數：MDViewer 帶 hashtag 路徑與 target、一律使用擴充語法；MDParser 帶 standard 旗標；MDEditor 只在匯出 HTML 時呼叫。
分層
| 層 | 位置 | 職責 |
|---|---|---|
| 公開類別 | src/model/editor.js、viewer.js、parser.js |
對外 API；掛到 window.MDEditor／MDViewer／MDParser |
| 編輯器子模組 | src/model/editorCaret.js、editorSelection.js、editorHistory.js、editorKeydown.js、editorTab.js |
游標、選取範圍、復原堆疊、快捷鍵對應、工具列 |
| 虛擬 DOM | src/model/vDOM.js |
新舊節點樹比對；目前預覽器改用 replaceChildren() 整段替換，diff 未啟用 |
| 轉換函式 | src/function/set*.js、transToHTML.js |
每種語法一個函式，依固定順序執行 |
| 共用常數 | src/data.js |
regex、字串常數、CDN 資源注入、isDarkMode |
| 樣式 | src/sass/ → dist/NanoMD.css、dist/NanoMD-output.css |
編輯器／預覽器樣式與匯出 HTML 用樣式 |
跨切原則
| 原則 | 表現 |
|---|---|
| 零框架 | 只使用原生 DOM API；createElement() 是自家的輕量建構函式 |
| 單一轉換入口 | 所有 HTML 都由 transToHTML() 產生，語法行為在三個元件間一致（standard 旗標除外） |
| 佔位符隔離 | 已轉換的片段換成 {{tag-uuid}}，避免後續步驟重複解析，最後一次還原 |
| 全域建置 | src/**/*.js 由 terser 串接成一支腳本，函式與常數都在同一個 script scope |