Markdown 延伸模組

Markdown 擴充功能讓您可以擴充並增強 Visual Studio Code 內建的 Markdown 預覽功能。這包括更改預覽的外觀，或新增對新 Markdown 語法的支援。

使用 CSS 更改 Markdown 預覽的外觀

擴充功能可以貢獻 CSS 來更改 Markdown 預覽的外觀或佈局。樣式表是透過擴充功能的 package.json 中的 markdown.previewStyles 貢獻點 (Contribution Point) 進行註冊的。

"contributes": {
    "markdown.previewStyles": [
        "./style.css"
    ]
}

"markdown.previewStyles" 是一個相對於擴充功能根目錄的檔案列表。

貢獻的樣式會添加在內建的 Markdown 預覽樣式之後，但在使用者的 "markdown.styles" 之前。

Markdown Preview GitHub Styling 擴充功能是一個很好的範例，它展示了如何使用樣式表讓 Markdown 預覽看起來像 GitHub 渲染的 Markdown。您可以在 GitHub 上檢閱該擴充功能的原始程式碼。

使用 markdown-it 外掛程式新增對新語法的支援

VS Code Markdown 預覽支援 CommonMark 規範。擴充功能可以透過貢獻 markdown-it 外掛程式來新增對額外 Markdown 語法的支援。

若要貢獻 markdown-it 外掛程式，首先請在擴充功能的 package.json 中新增一個 "markdown.markdownItPlugins" 貢獻。

"contributes": {
    "markdown.markdownItPlugins": true
}

接著，在擴充功能主要的 activation 函式中，回傳一個包含名為 extendMarkdownIt 函式的物件。此函式會接收當前的 markdown-it 實例，並且必須回傳一個新的 markdown-it 實例。

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  return {
    extendMarkdownIt(md: any) {
      return md.use(require('markdown-it-emoji'));
    }
  };
}

若要貢獻多個 markdown-it 外掛程式，請回傳多個鏈結在一起的 use 陳述式。

return md.use(require('markdown-it-emoji')).use(require('markdown-it-hashtag'));

貢獻 markdown-it 外掛程式的擴充功能會在 Markdown 預覽首次顯示時才進行延遲載入 (lazily activated)。

markdown-emoji 擴充功能展示了如何使用 markdown-it 外掛程式來新增 Emoji 支援到 Markdown 預覽中。您可以在 GitHub 上檢閱 Emoji 擴充功能的原始程式碼。

您可能也想參考

使用指令碼新增進階功能

對於進階功能，擴充功能可以貢獻在 Markdown 預覽內執行的指令碼。

"contributes": {
    "markdown.previewScripts": [
        "./main.js"
    ]
}

貢獻的指令碼會以非同步方式載入，並在每次內容變更時重新載入。

Markdown Preview Mermaid Support 擴充功能展示了如何使用指令碼為 Markdown 預覽新增 Mermaid 圖表和流程圖支援。您可以在 GitHub 上檢閱 Mermaid 擴充功能的原始程式碼。

5/28/2026