在 vs code 中設置 markdown 預覽樣式需創建 css 文件并配置路徑。1. 創建包含自定義樣式的 css 文件，如 markdown.css；2. 在 vs code 設置中搜索 markdown.styles 并添加 css 文件路徑；3. 重啟 vs code 或重新打開預覽以應用樣式。針對不同 markdown 文件使用不同樣式的方法包括：1. 使用不同工作區分別配置不同 css；2. 安裝插件實現動態切換；3. 手動修改設置中 css 路徑。調試方法有：1. 使用 vs code 開發者工具查看 html 和 css；2. 將 markdown 轉為 html 在瀏覽器調試；3. 利用插件實現實時預覽；4. 分步添加樣式逐步調試。若樣式不生效，常見原因及解決方法包括：1. 檢查路徑是否正確；2. 確保 css 文件無語法錯誤；3. 清除 vs code 緩存或重啟；4. 排查插件沖突；5. 更新 vs code 版本；6. 確認文件編碼為 utf-8；7. 檢查文件訪問權限。
在 VS Code 中設置 Markdown 預覽樣式，本質上就是讓 VS Code 知道你想用什么樣的 CSS 文件來渲染你的 Markdown 文檔。你可以通過修改 VS Code 的設置，告訴它你的 CSS 文件在哪里，然后它就會按照你的 CSS 文件來顯示預覽效果。
解決方案
-
創建 CSS 文件： 首先，你需要創建一個 CSS 文件，這個文件里包含了你想要的 Markdown 預覽樣式。你可以根據自己的喜好來設置字體、顏色、間距等等。比如，你可以創建一個名為 markdown.css 的文件，并把它放在你的 Markdown 文件所在的文件夾里。
-
配置 VS Code： 打開 VS Code 的設置（可以通過 文件 -> 首選項 -> 設置 或者快捷鍵 Ctrl + , 打開）。在設置里搜索 markdown.styles。
立即學習“前端免費學習筆記（深入）”；
-
添加 CSS 文件路徑： 在 markdown.styles 設置項中，點擊 添加項 按鈕，然后輸入你的 CSS 文件的路徑。如果你的 markdown.css 文件和 Markdown 文件在同一個文件夾里，你可以直接輸入 markdown.css。如果不在同一個文件夾，你需要輸入完整的路徑，比如 /Users/yourname/Documents/markdown.css。
-
重啟 VS Code 或者重新打開 Markdown 預覽： 有時候，VS Code 可能需要重啟或者重新打開 Markdown 預覽才能應用新的樣式。你可以關閉當前的 Markdown 預覽窗口，然后重新打開它，或者直接重啟 VS Code。
現在，你的 Markdown 預覽應該會按照你的 CSS 文件來顯示了。
如何針對不同的 Markdown 文件使用不同的 CSS 樣式？
VS Code 本身并沒有直接提供針對不同 Markdown 文件使用不同 CSS 樣式的設置。但是，你可以通過一些間接的方法來實現這個需求。
-
使用不同的 VS Code 工作區： 為每個需要不同樣式的 Markdown 文件創建一個獨立的 VS Code 工作區（Workspace）。然后在每個工作區的設置中，分別配置 markdown.styles 指向不同的 CSS 文件。這種方法比較適合管理多個項目，每個項目都有自己獨立的 Markdown 樣式需求。
-
使用插件： 有一些 VS Code 插件可以幫助你實現這個需求。例如，一些插件允許你在 Markdown 文件中嵌入 CSS 代碼，或者根據 Markdown 文件的文件名來選擇不同的 CSS 文件。你可以搜索 VS Code 插件市場，找到適合你的插件。
-
手動切換 CSS 文件： 你可以創建一個包含多個 CSS 文件路徑的 markdown.styles 設置，然后在需要切換樣式的時候，手動修改這個設置。這種方法比較簡單，但是每次都需要手動修改設置，不太方便。
總的來說，使用不同的 VS Code 工作區是比較推薦的方法，因為它比較靈活，而且可以很好地管理多個項目。使用插件也是一個不錯的選擇，但是你需要找到適合你的插件。手動切換 CSS 文件則比較麻煩，不太推薦。
如何調試 Markdown 預覽的 CSS 樣式？
調試 Markdown 預覽的 CSS 樣式可能會有點棘手，因為你不能像調試網頁那樣直接使用瀏覽器的開發者工具。不過，還是有一些方法可以幫助你調試。
-
使用 VS Code 的開發者工具： VS Code 本身也提供了一個開發者工具，你可以通過 幫助 -> 切換開發者工具 打開它。雖然這個開發者工具的功能不如瀏覽器的開發者工具那么強大，但是你仍然可以使用它來查看 Markdown 預覽的 HTML 結構和 CSS 樣式。你可以在開發者工具中找到 Markdown 預覽的 webview，然后查看它的 HTML 結構和 CSS 樣式。
-
在瀏覽器中預覽： 你可以將你的 Markdown 文件轉換為 HTML 文件，然后在瀏覽器中預覽。這樣你就可以使用瀏覽器的開發者工具來調試 CSS 樣式。你可以使用一些 Markdown 轉換工具，例如 pandoc，將 Markdown 文件轉換為 HTML 文件。
-
使用 VS Code 的實時預覽功能： 有一些 VS Code 插件提供了實時預覽功能，可以在你修改 CSS 文件的時候，實時更新 Markdown 預覽。這樣你就可以快速地看到你的修改效果，從而更快地調試 CSS 樣式。
-
逐步調試： 你可以先從一個簡單的 CSS 樣式開始，然后逐步添加更多的樣式。每次添加一些樣式后，都檢查一下 Markdown 預覽的效果，看看是否符合你的預期。這樣可以幫助你更快地找到問題所在。
調試 Markdown 預覽的 CSS 樣式需要一些耐心和技巧，但是只要你掌握了這些方法，就可以輕松地創建出漂亮的 Markdown 預覽效果。
VS Code Markdown 預覽樣式不生效的常見原因及解決方法
有時候，即使你按照上述步驟配置了 VS Code 的 Markdown 預覽樣式，樣式可能仍然不生效。這可能是由以下原因造成的：
-
CSS 文件路徑錯誤： 確保你在 markdown.styles 設置中輸入的 CSS 文件路徑是正確的。如果路徑錯誤，VS Code 就無法找到你的 CSS 文件，從而無法應用樣式。檢查路徑是否包含拼寫錯誤，或者是否使用了正確的相對路徑或絕對路徑。
-
CSS 文件內容錯誤： 檢查你的 CSS 文件中是否存在語法錯誤，或者是否使用了不支持的 CSS 屬性。如果 CSS 文件中存在錯誤，VS Code 可能無法正確解析它，從而導致樣式不生效。你可以使用 CSS 驗證工具來檢查 CSS 文件中的錯誤。
-
VS Code 緩存問題： 有時候，VS Code 可能會緩存舊的 CSS 文件，導致你修改后的樣式沒有生效。你可以嘗試重啟 VS Code，或者清除 VS Code 的緩存。
-
插件沖突： 有些 VS Code 插件可能會干擾 Markdown 預覽的樣式。你可以嘗試禁用一些插件，看看是否能夠解決問題。特別是那些與 Markdown 相關的插件，例如 Markdown Lint、Markdown Preview Enhanced 等。
-
VS Code 版本問題： 有些 VS Code 版本可能存在一些 bug，導致 Markdown 預覽的樣式不生效。你可以嘗試更新 VS Code 到最新版本，或者回退到之前的版本。
-
文件編碼問題： 確保你的 CSS 文件和 Markdown 文件都使用了 UTF-8 編碼。如果文件編碼不正確，可能會導致樣式不生效。
-
權限問題： 確保 VS Code 有權限訪問你的 CSS 文件。如果 CSS 文件的權限設置不正確，VS Code 可能無法讀取它，從而導致樣式不生效。
當你遇到 Markdown 預覽樣式不生效的問題時，可以按照上述步驟逐一排查，找到問題所在，然后采取相應的解決方法。
