要 preview 的話, hotkey 是 ctrl + shift + v, GUI 操作在左上角.
在第3個 tab 可以看到, 我是使用 extension: paste as markdown

如果你偏好使用滑鼠操作而不是記憶快捷鍵,在 VS Code 中開啟 Markdown 預覽的 GUI 流程非常簡單。你可以透過編輯器介面上的按鈕或右鍵選單來完成。
透過右上角圖示開啟
這是最快速的操作方式。當你打開一個副檔名為 .md 的檔案時,請看向 VS Code 視窗的右上角。在那一排小圖示中,你會看到一個看起來像「左右分割的視窗」且旁邊帶有一個「放大鏡」的圖示。
點擊這個圖示,編輯器會立即在右側開啟一個預覽視窗。如果你只想單純看預覽而不編輯,可以點擊那個看起來只有「放大鏡」的圖示(通常在分欄圖示旁邊),它會直接把當前的編輯視窗切換成預覽模式。
透過右鍵選單操作
如果你習慣在程式碼區域點擊滑鼠右鍵,也可以在編輯區的任何地方按一下右鍵。在跳出的選單中,尋找 Open Preview(開啟預覽)或是 Open Preview to the Side(在側邊開啟預覽)。
選擇 Open Preview 會取代目前的編輯畫面,直接顯示結果;選擇 Open Preview to the Side 則會保留左邊的程式碼,並在右邊新增一個對照用的預覽視窗。
透過命令面板
如果你找不到圖示,也可以點擊 VS Code 最上方選單列的 View(檢視),選擇 Command Palette…(命令面板)。在彈出的輸入框中輸入 Markdown,你會看到 Markdown: Open Preview to the Side 的選項,點擊它即可開啟。
同步捲動設定
開啟預覽後,你可能會發現左邊捲動時右邊也會跟著動。如果你想調整這個行為,可以點擊預覽視窗右上角的三個點(更多動作),在那裡可以開啟或關閉同步捲動的功能。這樣在處理很長的文件時,就能更靈活地對照特定區塊。
在 VS Code 中預覽 Markdown 的效果非常直覺,微軟已經內建了強大的預覽功能,你不需要安裝任何外掛就能使用。
側邊即時預覽
這是最常用的方式,可以讓你一邊編輯文字,一邊在右側看到排版後的結果。你可以使用快捷鍵 Ctrl + K 然後接著按 V (Mac 使用者請按 Cmd + K 然後按 V)。這會開啟一個與編輯視窗連動的預覽面板,當你捲動左邊的文字時,右邊的預覽也會跟著捲動,方便你對照內容。
切換全視窗預覽
如果你不需要編輯,只是想把目前的視窗切換成閱讀模式,可以使用快捷鍵 Ctrl + Shift + V (Mac 使用者請按 Cmd + Shift + V)。這個指令會直接在當前標籤頁顯示預覽結果。如果你想回到編輯模式,只要再次按下相同的快捷鍵,或者點擊右上角的編輯圖示即可。
透過右上角圖示操作
如果你不習慣記快捷鍵,也可以直接觀察編輯器右上角的工具欄。在 Markdown 檔案開啟的狀態下,右上角會出現一個像分欄表格的圖示,上面帶有一個放大鏡符號。點擊這個圖示就能開啟側邊預覽。
預覽樣式的自定義
VS Code 的預覽效果預設會根據你目前使用的主題顏色進行調整。如果你覺得預設樣式不好看,可以透過設定搜尋 Markdown: Styles 來載入外部的 CSS 檔案。許多人會載入 GitHub 的樣式檔,讓預覽結果看起來就像在 GitHub 網頁上看到的一模一樣。
匯出預覽結果
需要注意的是,VS Code 內建的預覽僅供在軟體內查看。如果你需要把預覽結果匯出成 PDF 或 HTML 檔案,則需要額外安裝名為 Markdown PDF 的擴充套件,安裝後在預覽介面點擊右鍵就能看到匯出選項。
當你從網頁瀏覽器複製 HTML 內容並貼上到 VS Code 的 Markdown 檔案時,VS Code 預設會以純文字格式處理。這是因為編輯器無法自動判定你是否想要將 HTML 標籤轉換為 Markdown 語法,所以它只會貼上原始的文字內容,導致標題或連結的格式消失。
使用內建的貼上轉換功能
VS Code 其實有內建自動轉換的功能,但有時候預設沒有開啟。你可以嘗試在貼上的時候,按下 Ctrl + Shift + V (Mac 是 Cmd + Shift + V),這在某些設定下會觸發格式化貼上。另外,你可以檢查 VS Code 的設定,搜尋並確定 Editor: Paste As Enabled 是開啟的。當你貼上時,右下角有時會出現一個小圖示,點開後可以選擇 Paste as Markdown,這樣它就會自動把網頁的標題層級和連結轉換成對應的 Markdown 語法。
安裝專用擴充套件
如果內建功能不夠聰明,最推薦的方式是安裝名為 Paste JSON as Code 或 Markdown All in One 的擴充套件。最受歡迎的一個工具叫做 Paste as Markdown。安裝後,當你從網頁複製內容,你可以透過指令面板輸入 Paste as Markdown,它會精準地把網頁的 HTML 結構轉換成 Markdown。這對於處理複雜的表格、粗體字或多層級標題非常有效。
使用線上轉換工具輔助
如果你不想安裝太多套件,也可以先利用一些線上工具轉換。例如 search 搜尋 HTML to Markdown 轉換器,先把網頁內容貼到轉換網頁中,得到標準的 Markdown 格式後,再複製到 VS Code 裡。雖然多了一個步驟,但這能確保轉換出來的語法最乾淨,不會夾雜奇怪的 HTML 標籤。
檢查檔案關聯與語法檢查
有時候問題出在 VS Code 沒有正確識別該檔案。請確認右下角的語言模式顯示為 Markdown。如果顯示的是純文字 (Plain Text),所有的語法高亮和自動轉換功能都會失效。點擊右下角的語言名稱並手動切換回 Markdown 即可恢復正常。
