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 外掛程式將 emoji 支援新增至 markdown 預覽。您可以在 GitHub 上檢閱 Emoji 擴充功能的原始碼。

您可能也想檢閱

使用腳本新增進階功能

對於進階功能，擴充功能可能會貢獻在 Markdown 預覽中執行的腳本。

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

貢獻的腳本會非同步載入，並在每次內容變更時重新載入。

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

04/03/2025