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 扩展演示了如何使用脚本为 markdown 预览添加 Mermaid 图表和流程图支持。您可以在 GitHub 上查看该 Mermaid 扩展的源代码。

5/28/2026