--- title: "MkDown：我每天寫 Markdown 寫到崩潰——用 Claude Code 寫個自己順手的編輯器" description: "我每天寫部落格、教案、README 都用 Markdown，但 MacDown 多年沒更新、Typora 收費、VS Code 太重。週末用 Claude Code 寫了 MkDown——macOS 原生、PyQt5 + Pygments、分頁編輯、深淺色自動切換、二指縮放、PDF/HTML 匯出，仿 MacDown 但是 2026 年版。MIT 開源、免費下載。" author: "莊哲昀（AJ）" tag: "Vibe Coding 實錄" date: 2026-05-24 updated: 2026-05-25 canonical: https://www.ahadigit.work/blog/mkdown-claude-code-build source: "html" --- # MkDown：我每天寫 Markdown 寫到崩潰——用 Claude Code 寫個自己順手的編輯器 那天我同時開著三份草稿——一篇部落格、一份 AI 內訓教案、一支開源工具的 README——三個檔案散在三個不同的 app：部落格在 VS Code（因為要 git）、教案在 Typora（因為要漂亮預覽）、README 在 GitHub 網頁編輯器（因為一時找不到本機檔）。寫到一半我自己都不知道哪個版本是最新的。然後我打開 MacDown 想救火，發現它**已經三年沒更新、6 GHz Wi-Fi 6E 那段表格根本渲染不出來**。我關掉視窗，跟自己說：**我每天寫這麼多 Markdown，為什麼沒有一個我自己順手的編輯器？** 那個週末我就用 Claude Code 寫完了 MkDown。 ### ✍️ MkDown v1.1.1 macOS 11+ 的輕量 Markdown 編輯器，仿 MacDown 的雙欄即時預覽、多分頁、深淺色自動、二指縮放、PDF/HTML 匯出。**MIT 開源、免費下載**。 [⬇ 下載 Releases](https://github.com/AndyJuang/mkdown/releases/latest) [看原始碼](https://github.com/AndyJuang/mkdown) ## 為什麼我需要這個工具 身為一個天天輸出文字的 AI 講師——部落格、教案、README、Claude Code Skill、學員講義——**我所有東西都用 Markdown 寫**。純文字、跨平台、版本控制乾淨、AI 也能看懂能改。 但 macOS 上的 Markdown 編輯器這幾年很尷尬：**MacDown**（一代神器）三年沒更新、新版的 admonition 跟 task list 渲染不出來；**Typora** 從免費 beta 變成 $14.99 買斷，我推薦學員、學員就退三步；**iA Writer** 訂閱制太文青、貼程式碼跟表格不是它的強項；**VS Code** 開一個視窗 800 MB RAM，只是寫篇部落格殺雞用牛刀。 我要的東西其實很簡單：開啟就能寫、左寫右看即時渲染、深色模式自動跟系統、貼程式碼有上色、寫完能輸出 PDF 給客戶、**分頁能同時開三份不同檔案來回切**。沒人做這個剛剛好的版本。那我自己做。 ## 我自己怎麼用 MkDown 現在是我所有 Markdown 工作的預設編輯器。寫部落格時左邊 raw markdown、右邊看 typography 大概的樣子；寫教案時 Python / Bash 範例用 Pygments 上色給學員看；寫 README 開檔前先預覽一遍，比直接 push 上 GitHub 才發現表格炸了快 10 倍；客戶要 PDF 版本 ⌘⇧P 一鍵匯出，比 Pandoc 那一串指令快多了。 最爽的是**多分頁**。我可以同時開「今天要交的部落格」「下週課程的教案」「正在改的 README」三個檔案、⌘1 ⌘2 ⌘3 來回切，不用開三個視窗也不用 task switch。 > 「需求清單就是我自己一週裡所有 markdown 操作的痛點。我不是在寫一個 Markdown 編輯器，我是在寫一個『我以後每天會用的 Markdown 編輯器』。」 —— AJ ## 用 Claude Code 寫 PyQt5 GUI 是什麼感覺 跟[WiFiScope](https://www.ahadigit.work/blog/wifiscope-claude-code-build) 跟[MacPrism](https://www.ahadigit.work/blog/macprism-claude-code-build)（兩個都 Swift + SwiftUI）不同——MkDown 我選了 **Python + PyQt5**。原因是想跨平台留後路（Windows / Linux 也能編）、Python 比 Swift 更多人會（學員想看原始碼學寫 GUI 容易上手）、加上 Markdown 套件 + Pygments 用 pip 一裝就有，不用自己刻。 但 PyQt5 對我來說一樣陌生。`QSyntaxHighlighter`、`QTextBrowser`、`QTabWidget`——這些東西我一個都沒寫過。Claude Code 都知道： - 「`QTextEdit` 不能客製化行號，要用 `QPlainTextEdit` + 自己畫 line number area。」 - 「`QSyntaxHighlighter` 要 subclass 然後 override `highlightBlock`，這是 Markdown 標題、粗體、程式碼的 regex 跟 format。」 - 「二指縮放需要 `QGestureRecognizer`，trackpad 事件預設不會傳到 widget，要在 `QApplication` 層 enable。」 它甚至幫我做了一件我根本想不到的事——**WCAG 對比度自動驗證**。我說「深淺色都要好讀」，它回「那我寫一個 `wcag_fix.py`，跑過所有前景／背景顏色組合，確保 WCAG AA/AAA 達標」。結果現在 MkDown 兩個主題的所有色票都過 AAA，我自己根本沒概念這件事該怎麼測。 ## 給其他人的建議 如果你也是天天寫 Markdown 的人——部落格作者、寫 README 的工程師、做教材的老師——**MkDown 拿去用**。免費、開源、不收訂閱、不要你註冊帳號、不上傳草稿到雲端。 如果你也是「想寫工具但不會寫程式」的人，這篇文章的重點不是工具是工作流：**從自己的真實痛點開始**（造你每天會用的輪子）、**先寫需求清單再交給 Claude Code**（我列了 12 條 must-have，它一條一條來）、**不熟的技術就直接問**（PyQt5、Pygments、PyInstaller、WCAG 全部問出來）、**用打包指令自動化**（`pyinstaller MkDown.spec` 一行產 .app）。 ## 完整功能列表 **✍️ Split-pane Live Preview** — 左寫右看，所見即所得；中文預覽用 PingFang TC，繁中閱讀舒服 **📑 Multi-tab** — ⌘T 開新分頁、⌘W 關、⌘1–⌘9 / ⌘⇧[ ⌘⇧] 切換；拖 .md 進視窗自動開新分頁 **🌓 Light / Dark / Auto** — 跟 macOS 系統外觀自動切換，或手動在 View menu 鎖定 **🎨 Syntax Highlighting** — 編輯器內 Markdown 語法上色（標題、粗體、斜體、程式碼、連結）；程式碼塊用 Pygments friendly / monokai 配深淺色 **🤏 Pinch-to-zoom** — trackpad 兩指縮放預覽字級，現場 demo 給觀眾看不用一直按 ⌘= **📄 Export PDF / HTML** — ⌘⇧P 匯出 PDF（用 Qt print engine 全保真）、⌘⇧H 匯出 self-contained HTML（樣式內嵌） **📋 GFM Support** — tables、task lists（- [ ]）、footnotes、definition lists、admonitions 全部支援 **♿ WCAG AAA** — 深淺兩個主題所有前景／背景色對都通過 WCAG AA/AAA 對比度 **⌨️ CLI 開檔** — `python3 main.py README.md` 直接從終端機打開檔案 ## 背後的技術棧 給好奇技術細節的讀者： - **Python 3.10+**，主檔分成 `main.py`（入口 + Apple Event handler）、`window.py`（主視窗、分頁、選單）、`editor.py`（編輯器 widget + 行號）、`highlighter.py`（Markdown syntax highlighter）、`preview.py`（預覽渲染）、`theme.py`（深淺色管理）、`wcag_fix.py`（對比度稽核） - **PyQt5** — GUI framework，`QMainWindow` + `QTabWidget` + `QPlainTextEdit` + `QTextBrowser` - **Markdown 套件** — Markdown → HTML 渲染，啟用 tables / fenced\_code / footnotes / def\_list / admonition extensions - **Pygments** — fenced code block 語法上色（friendly 配淺色、monokai 配深色） - **PyInstaller** — 打包成 .app bundle，`pyinstaller MkDown.spec --clean -y` 一鍵產生 `dist/MkDown.app` - **授權**：MIT，[原始碼公開](https://github.com/AndyJuang/mkdown)，致敬 [MacDown](https://macdown.uranusjr.com/) ## 非工程師能做到什麼？這已經是第四個了 我不是工程師背景。但這兩個月來—— - 用 Claude Code 蓋了[那個數位整個官網](https://www.ahadigit.work/blog/building-ahadigit-claude-code-vercel)（Web + Serverless + Redis） - 用 Claude Code 寫了[MacPrism](https://www.ahadigit.work/blog/macprism-claude-code-build)（menu bar 系統 + AI 額度監控，Swift + SwiftUI） - 用 Claude Code 寫了[WiFiScope](https://www.ahadigit.work/blog/wifiscope-claude-code-build)（純桌面 SwiftUI app、碰 CoreWLAN） - 用 Claude Code 寫了 MkDown（PyQt5 跨平台桌面 app、QSyntaxHighlighter + Pygments） - 用 Claude Code 一個下午[並行重構了 19 篇部落格](https://www.ahadigit.work/blog/ai-coding-tools-2026) 四個專案橫跨 **JavaScript / Swift / Python** 三個語言、**Web / 原生 macOS / 跨平台桌面** 三種 runtime。如果我自己寫，光是學完語法就要半年。但現在它們是我的工具箱。**不是因為我變強了，是因為我多了一個工程合夥人**。 ## 結語：你也可以週末寫一個 MkDown 不是要跟 Typora 競爭。它的初衷只是：**我自己每天寫 Markdown 寫到崩潰、現有工具沒一個全中我的需求、那我用 Claude Code 寫一個**。寫完順便開源，給跟我一樣每天輸出文字的人——部落格作者、寫 README 的工程師、做教材的老師、做技術文件的 PM——拿去用。 2026 年最有趣的事情，就是這個——**你心裡那個「為什麼沒有人做這個」的小工具，現在你自己可以做**。週末兩天、零成本、學一點新技術、收一個自己每天會用的工具。 需要的話拿去用，覺得有用幫我按個 star。覺得有 bug 或缺哪個功能，[開個 issue](https://github.com/AndyJuang/mkdown/issues) 跟我說。 ### ✍️ 立刻下載 MkDown macOS 11+ ‧ Python 3.10+ ‧ MIT 授權 ‧ 免費 ‧ 開源 [⬇ Releases 下載](https://github.com/AndyJuang/mkdown/releases/latest) [GitHub Repo](https://github.com/AndyJuang/mkdown) > 那個數位的 AI Coding 員工賦能訓練——從 web、原生 macOS app、到 Python 跨平台桌面工具，**讓你的員工也能週末寫一個自己想要的工具**。[歡迎預約諮詢](https://www.ahadigit.work/contact)。