平常工作時累積了不少 Markdown 筆記和文件，卻沒有一個輕便的方式在本機瀏覽整個資料夾的內容。大多數工具不是需要安裝，就是要跑一個後端服務，對於單純「讀文件」這件事來說太重了。於是我做了 Markdown Explorer。

這是什麼？

Markdown Explorer 是一個純瀏覽器的 Markdown 閱讀器，不需要安裝任何軟體，也不需要 build step。只要有 Chrome 或 Edge，開啟頁面，選擇一個本機資料夾，就能立刻瀏覽裡面的所有 .md 檔。

👉 線上 Demo：https://markdown-explorer.hankchen.info/  

👉 原始碼：https://github.com/Hank076/markdown-explorer  

核心功能

資料夾樹狀側欄

選擇本機資料夾後，左側會顯示完整的檔案樹。側欄可以拖拉調整寬度，也可以一鍵收合，讓閱讀區取得更多空間。

多標籤預覽

點開多個檔案後，每個檔案都會開在獨立的標籤頁，並且記憶每個檔案的捲軸位置。在文件之間來回切換時不會跳回頂端，閱讀長文件特別順手。

Mermaid 圖表渲染

文件裡的 Mermaid 程式碼區塊會自動渲染成圖表，支援 Flowchart、Sequence Diagram、Gantt Chart 等各種圖表類型。

1
2
3
4
5
6

```mermaid
graph TD
    A[選擇資料夾] --> B[瀏覽檔案樹]
    B --> C[點開 .md 檔]
    C --> D[多標籤預覽]
```

語法高亮

程式碼區塊由 highlight.js 與 Prism 提供語法高亮，支援主流程式語言。

深色 / 淺色主題切換

支援深色與淺色模式，偏好設定存在 localStorage，下次開啟自動恢復。

繁中 / 英文介面

UI 語言可在繁體中文與英文之間切換，同樣記憶在 localStorage。

技術架構

整個工具是一個純 Vanilla JavaScript 的單頁應用，刻意不用任何前端框架：

所有相依套件都已 vendor 到 libs/ 目錄，不需要執行 npm install。

存取本機檔案系統使用的是瀏覽器原生的 File System Access API   ，因此完全不需要後端。

如何使用

由於 ES Modules 不支援 file:// 協定，需要一個本機 HTTP server：

1
2
3
4
5

# 方法一：使用 npx
npx serve .

# 方法二：使用 Python
python -m http.server 8000

啟動後用 Chrome 或 Edge 開啟，點「開啟資料夾」，即可開始使用。

注意：目前需要 Chrome 或 Edge，因為 Firefox 對 File System Access API 的支援仍有限制。

小結

Markdown Explorer 的定位很簡單：最輕便的本機 Markdown 瀏覽器。沒有帳號、沒有雲端、沒有安裝，打開瀏覽器就能用。

原始碼已開源，歡迎試用或回報問題： https://github.com/Hank076/markdown-explorer