VSCode-Extensions-Markdown

一、前言

在現今的軟體開發、文件撰寫、筆記記錄等領域， Markdown 已經成為一種不可或缺的輕量級標記語言。它以其簡潔、易讀、易寫的特性，廣受歡迎。相較於傳統的富文本格式 (如 Word)，Markdown 使用純文字來表示格式，能專注於內容創作，並減少排版上的干擾。

Visual Studio Code (VS Code) 作為一款強大的程式碼編輯器，通過豐富的擴充功能，對 Markdown 提供了極佳的支援。無論是撰寫技術文件、筆記，或是 README 檔案，VS Code 都能提供流暢、高效的 Markdown 編輯體驗。

本文件將介紹如何在 VS Code 中安裝和使用 Markdown 相關的插件，並示範如何透過這些工具來提升 Markdown 的編輯效率，讓您能更輕鬆地享受 Markdown 的便捷性。

為何選擇 Markdown？

• 簡潔易學： Markdown 語法簡單直觀，容易上手，您不必花費太多時間學習。
• 純文字格式： Markdown 文件是純文字格式，可以在任何文字編輯器中開啟，並且易於版本控制。
• 專注內容： Markdown 讓您專注於內容的撰寫，而非複雜的排版。
• 跨平台相容： Markdown 文件可以在各種平台和應用程式中無縫轉換和顯示。
• 廣泛應用： Markdown 已廣泛應用於部落格、技術文件、筆記軟體、社群平台等，是一種通用的文件格式。

為何選擇 VS Code 編輯 Markdown？

• 強大的編輯器： VS Code 是一款功能強大、可高度自訂的程式碼編輯器，提供了良好的 Markdown 編輯體驗。
• 豐富的擴充功能： VS Code 的擴充功能生態系統非常活躍，有許多 Markdown 相關的插件可以提升編輯效率。
• 即時預覽： VS Code 可以即時預覽 Markdown 文件，讓您隨時看到呈現效果。
• 跨平台支援： VS Code 可以在 Windows、macOS 和 Linux 等多個平台上使用。

目錄

• 一、前言
  • 目錄
• 二、安裝
  • (2.1) 安裝編輯器
  • (2.2) 安裝Markdown相關插件
    • 從Marketplace安裝
    • 從VSCode IDE Extensions安裝
• 三、編輯 Markdown 檔案

二、安裝

返回目錄

(2.1) 安裝編輯器

Visual Studio Code (VS Code) 是一款免費、開源、跨平台、功能強大的程式碼編輯器，它提供了豐富的擴充功能，使其不僅適用於程式碼編輯，也適用於各種文字處理任務，包含撰寫 Markdown 文件。

以下是如何安裝 VS Code 的步驟：

1. 前往官方網站：
   • 開啟您的瀏覽器，前往 VS Code 的官方網站： https://code.visualstudio.com/ 。
2. 選擇您的作業系統：
   • 在網站首頁，您會看到針對不同作業系統 (Windows、macOS、Linux) 的下載按鈕。
   • 根據您使用的作業系統，點選對應的下載按鈕。
3. 下載安裝程式：
   • 下載完成後，您會得到一個安裝程式檔案 (例如： VSCodeSetup.exe 、 VSCode-darwin-universal.zip 、 code_1.xxx_amd64.deb 等)。
4. 執行安裝程式：
   • 雙擊下載的安裝程式檔案，開始執行安裝程序。
5. 依照安裝提示：
   • 依照安裝提示，完成 VS Code 的安裝。您可能需要同意使用者協議、選擇安裝路徑等。
6. 完成安裝：
   • 安裝完成後，您可以在您的應用程式清單或桌面找到 VS Code 的圖示，點擊即可啟動 VS Code。

VS Code 安裝後的建議設定：

• 語言設定： VS Code 預設使用英文介面，如果您需要切換為其他語言，可以到設定中搜尋 "configure language" 進行修改。
• 佈景主題： VS Code 提供了許多預設的佈景主題，您可以依照您的喜好來選擇。 您可以在設定中搜尋 "color theme" 來選擇佈景主題。
• 擴充功能： 您可以依照需求安裝不同的擴充功能，以提升 VS Code 的功能。
• 自動儲存： 建議開啟自動儲存功能，以便在編輯時能自動儲存檔案，減少檔案遺失的風險。 你可以在設定中搜尋 "auto save" 來設定自動儲存。
• 字體設定: 您可以根據個人喜好調整字體大小、行高、字型等。 你可以在設定中搜尋 "font" 來設定字型相關設定。

貼心提示：

• VS Code 是個不斷發展的編輯器，官方會持續釋出更新。建議定期更新 VS Code，以獲得最新的功能和修正。
• VS Code 的擴充功能商店 (Extensions Marketplace) 有非常多優質的插件，您可以多加探索，找到適合自己的工具。
• VS Code 提供了豐富的自訂選項，您可以根據個人偏好調整設定，讓 VS Code 更符合你的需求。

(2.2) 安裝Markdown相關插件

返回目錄

VSCODE Extensions

從Marketplace安裝

• 編輯Markdown整合很完整的插件： Markdown All in One
• 安裝Markdown註腳插件： Markdown Footnotes
• 如果有需要Emoji表情符號支持，可以安裝： Markdown Emoji
• 也是有需要導出成PDF，可以安裝： Markdown PDF
• 有專門數學需求的，可以安裝： Markdown+Math ，需要禁用Markdown All in One的Math enable設定
  
• 有些圖表、流程圖等需求的，可以安裝： Mermaid diagram and flowchart

從VSCode IDE Extensions安裝

• Markdown All in One
  
• Markdown Footnotes
  
• Markdown Emoji
  
• Markdown PDF
  
• Markdown+Math
  
  
  需要禁用Markdown All in One的Math enable設定
  
• Markdown Preview Mermaid Support
  

三、編輯 Markdown 檔案

返回目錄

在 VS Code 中編輯 Markdown 檔案非常簡單，只需幾個步驟：

1. 建立新檔案：
   • 在 VS Code 中，點選「檔案」>「新增檔案」，或者使用快捷鍵 Ctrl+N (Windows/Linux) 或 Cmd+N (macOS) 來建立一個新檔案。
2. 設定檔案副檔名：
   • 將新檔案的副檔名設定為 .md ，例如： my_document.md 。這樣 VS Code 就能夠正確識別該檔案為 Markdown 檔案，並啟用相關的 Markdown 編輯功能。
3. 開始編輯：
   • 在編輯器中輸入 Markdown 語法，就可以開始撰寫您的 Markdown 文件。
   • VS Code 會根據您輸入的 Markdown 語法，即時更新預覽視窗 (如果開啟的話)。
4. 開啟預覽視窗：
   • 要即時查看 Markdown 的渲染效果，可以開啟 VS Code 的 Markdown 預覽視窗。
   • 點選編輯器右上角的「開啟預覽」按鈕，或使用快捷鍵 Ctrl+Shift+V (Windows/Linux) 或 Cmd+Shift+V (macOS)。
   • 預覽視窗會顯示 Markdown 渲染後的樣式。
     
5. 使用快捷鍵：
   • VS Code 提供了許多 Markdown 快捷鍵，可以幫助您快速插入標題、列表、程式碼區塊等格式。
   • 例如：
     • Ctrl+B (Windows/Linux) 或 Cmd+B (macOS): 粗體
     • Ctrl+I (Windows/Linux) 或 Cmd+I (macOS): 斜體
     • Ctrl+Shift+] : 增加縮排
     • Ctrl+Shift+[ : 減少縮排
     • Ctrl+Shift+K : 開啟 Markdown 預覽
   • 您可以在 VS Code 的設定中，自訂這些快捷鍵。
6. 善用插件提供的功能:
   • 安裝如「Markdown All in One」等插件後，可以利用插件提供的功能，例如快捷鍵、自動完成、語法高亮等功能。
   • Markdown All in One: Create Table of Contents
     • 這個指令會自動掃描你的 Markdown 文件中的標題 (heading)，然後根據標題的層級 (h1, h2, h3 等) 建立一個 TOC，並將 TOC 插入到你游標所在的位置。
   • Markdown All in One: print current document to HTML
     • 這個指令會自動將目前的文件轉成HTML文檔並儲存至同層目錄。

貼心提示：

• VS Code 的 Markdown 支援非常完善，您可以透過插件擴充更多功能，例如：表格編輯器、Mermaid 圖表等。
• 善用預覽功能，可以即時檢視您的編輯結果，確保 Markdown 文件符合您的需求。
• 您可以在 VS Code 的使用者設定中，調整 Markdown 的字型、配色等，讓編輯環境更符合您的個人喜好。

現在，您可以開始使用 VS Code 編輯您的 Markdown 文件，體驗便捷、高效的文本編輯方式。

返回目錄