挑 Markdown 編輯器，可以先拿一篇自己正在寫的文章試：輸入標題、插入圖片、貼一段程式碼，再把檔案放進網站預覽。這幾件事做起來順不順，比功能清單長不長更有參考價值。
如果希望寫作時少看語法，可以從 Typora 開始；如果文章和網站程式碼放在同一個專案，經常需要找檔案、改設定，VS Code 會比較方便。這篇以部落格文章為例，重點放在編輯與圖片管理。
Typora 與 VS Code，先選一個把文章寫完
| 寫作需求 | 可以先試的工具 | 實際要檢查的地方 |
|---|---|---|
| 主要寫正文，希望畫面接近文章外觀 | Typora | 貼圖方式、標題操作，以及匯出需求。 |
| 在網站專案內寫文章、改程式碼 | VS Code | 資料夾導覽、Markdown 預覽、終端機與 Git。 |
| 偶爾修改簡單文字 | 現有文字編輯器 | 是否以 UTF-8 儲存，副檔名是否正確。 |
Typora 的安裝與授權條件，請在使用前查看官網（在新分頁開啟）。這裡不把舊版試用方式當成現行授權說明。
VS Code 已有基本 Markdown 編輯與預覽功能，不必為了看標題、清單和圖片，先裝一整套外掛。Windows 可以用 Ctrl+Shift+V 開啟預覽，或用 Ctrl+K、接著按 V，在旁邊顯示預覽。VS Code 官方文件（在新分頁開啟）
用同一份範例檢查編輯器
建立 index.md，貼入下面內容，先確認基本格式看得懂：
# 我的第一篇 Markdown 筆記
這段是一般文字，**這幾個字是重點**。
## 今天完成的事情
- 建立文章資料夾- 寫下操作步驟- 在網站上檢查結果
[查看 Python 官方網站](https://www.python.org/)標題、清單和連結正常後，再練習表格與程式碼區塊。程式碼區塊要註明語言，例如 python、powershell，比較容易得到適合的語法標示。
如果是網站教學文章，操作步驟和程式碼要分開。不要把一大段說明塞進程式碼區塊，讀者複製時才不會連正文一起貼到終端機。
圖片跟著文章放，搬家比較不容易漏掉
以 Astro 的文章資料夾為例，可以把 Markdown 和圖片放在一起：
src/content/posts/my-note/├── index.md├── install-window.png└── result.png文章中使用相對路徑：
./ 表示從目前 Markdown 檔案所在位置開始找。圖片與文章在同一層，就不需要把 Windows 使用者名稱或硬碟代號寫進去。
下面這種路徑只對某台電腦有意義，不適合直接放進網站文章：
C:\Users\某個帳號\Pictures\result.png另外，/result.png 與 ./result.png 的意思不同。前者是網站根目錄路徑；在 Astro 專案裡，若採用這種公開檔案路徑，通常會對應到 public/result.png。後者則跟著文章位置走。Astro 對 Markdown 圖片與 public/ 圖片的處理方式，可查官方圖片文件（在新分頁開啟）。
Typora 的圖片設定怎麼理解？
Typora 可以設定插入圖片時的複製位置。寫部落格時，可以選擇把圖片複製到文章附近的資料夾，再檢查產生的 Markdown 是否使用相對路徑。不同版本的設定名稱可能略有差異，操作方式以官方圖片說明（在新分頁開啟）為準。
如果文章使用網站根目錄圖片，例如 /media/example.png，Typora 可能不知道要到本機哪個網站目錄尋找。這時才需要考慮 typora-root-url，替本機預覽指定根目錄。
下面是概念範例，路徑必須換成自己的網站公開檔案目錄：
---typora-root-url: C:/my-blog/public---這項設定幫 Typora 找到本機圖片，不會替網站複製圖片，也不會自動修改網站部署路徑。若文章已採用 ./圖片名稱，可以先維持同目錄管理，不必額外加上根目錄設定。
原筆記曾引用這份討論，涉及編輯器預覽行為：Markdown Preview Enhanced issue #1344（在新分頁開啟）。碰到預覽差異時，要分清楚問題發生在編輯器、外掛，還是網站本身。
VS Code 寫網站文章的基本流程
用 VS Code 開啟整個網站資料夾，再從檔案總管找到文章位置。這樣比較容易同時看見 Markdown、圖片與網站設定。
寫一篇文章時，可以照這個順序：
- 建立文章資料夾與
index.md。 - 先填標題、日期、簡介等網站需要的資料。
- 寫正文，將圖片複製到文章資料夾。
- 用 Markdown 預覽確認基本格式。
- 啟動網站，在實際文章網址檢查排版。
以這個 Astro 部落格為例，本地預覽從專案根目錄執行：
npm.cmd run dev編輯器預覽正常，不代表網站呈現一定相同。網站可能有自己的程式碼樣式、圖片處理、數學公式或擴充語法，最後仍要看實際頁面。
如果需要 Markdown Preview Enhanced 的功能，可以接著看站內的安裝與使用筆記。先知道缺少什麼，再決定是否加外掛，設定比較容易維護。
心智圖、筆記軟體和網頁編輯元件，別放在同一張比較表
原筆記還列過幕布、VNote 和 TOAST UI Editor。它們可以放進不同工作流程，但選擇時應先確認用途：整理文章大綱、管理筆記，和把編輯器嵌入自己開發的網站，是不同的需求。
如果現在的問題是「如何把這篇部落格寫完」，先選能順利編輯、存圖與預覽的工具即可。網站開發需要的嵌入式編輯元件，等真的要做編輯介面時再研究。
發布前檢查這幾個地方
把文章資料夾複製到另一個位置，再開一次圖片連結，是檢查路徑是否依賴本機環境的簡單方法。也可以用 Git 查看這次到底加入了哪些檔案，確認沒有只提交 Markdown、漏掉圖片。
再檢查圖片檔名大小寫、檔案是否真的存在，以及圖說是否能讓讀者知道畫面在說什麼。Windows 本機不容易察覺的大小寫差異，到了其他系統上可能會變成破圖。
最後用手機寬度看一次表格和程式碼。文章在編輯器裡排得整齊，到了較窄的畫面，仍可能出現太長的路徑或網址。