Markdown 擴充套件

Markdown 擴充套件允許您擴充套件和增強 Visual Studio Code 內建的 Markdown 預覽。這包括更改預覽的外觀或新增對新 Markdown 語法的支援。

使用 CSS 更改 Markdown 預覽的外觀

擴充套件可以透過 `package.json` 中的 markdown.previewStyles 貢獻點來貢獻 CSS，以更改 Markdown 預覽的外觀或佈局。

"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 預覽時惰性啟用。

markdown-emoji 擴充套件演示瞭如何使用 markdown-it 外掛為 Markdown 預覽新增表情符號支援。您可以在 GitHub 上查看錶情符號擴充套件的原始碼。

您可能還想檢視

使用指令碼新增高階功能

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

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

貢獻的指令碼是非同步載入的，並在每次內容更改時重新載入。

Markdown Preview Mermaid Support 擴充套件演示瞭如何使用指令碼為 Markdown 預覽新增 Mermaid 圖表和流程圖支援。您可以在 GitHub 上檢視 Mermaid 擴充套件的原始碼。

12/10/2025