編輯

Markdown 擴充套件

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

使用 CSS 更改 Markdown 預覽的外觀

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

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

"markdown.previewStyles" 是相對於擴充套件根資料夾的檔案列表。

貢獻的樣式在內建 Markdown 預覽樣式之後新增，但在使用者定義的 "markdown.styles" 之前。

Markdown 預覽 GitHub 樣式擴充套件是一個很好的例子，它演示瞭如何使用樣式表使 Markdown 預覽看起來像 GitHub 渲染的 Markdown。您可以在 GitHub 上檢視該擴充套件的原始碼。

使用 markdown-it 外掛新增新語法支援

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

要貢獻一個 markdown-it 外掛，首先在您的擴充套件的 package.json 中新增一個 "markdown.markdownItPlugins" 貢獻。

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

然後，在擴充套件的 main 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 上檢視 Emoji 擴充套件的原始碼。

您可能還想檢視

markdown-it 外掛開發人員的指南
現有的 markdown-it 外掛

使用指令碼新增高階功能

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

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

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

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

09/11/2025