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 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 上查看 Emoji 擴充功能的原始碼。

您可能也想查看

使用指令碼新增進階功能

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

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

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

Markdown Preview Mermaid Support 擴充功能示範如何使用指令碼將 Mermaid 圖表和流程圖支援新增至 markdown 預覽。您可以在 GitHub 上查看 Mermaid 擴充功能的原始碼。

02/06/2025