Markdown 扩展

Markdown 扩展允许您扩展和增强 Visual Studio Code 内置的 Markdown 预览。这包括更改预览的外观或添加对新 Markdown 语法的支持。

使用CSS更改Markdown预览的外观

扩展程序可以贡献CSS以更改Markdown预览的外观或布局。样式表是通过使用注册的。markdown.预览样式 贡献点 在扩展中package.json输入：

"贡献": {
    "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 插件，首先添加一个"markdown.markdownItPlugins"在您的扩展中的贡献package.json输入：

"贡献": {
    "markdown.markdownItPlugins": true
}

然后，在扩展的主页面激活函数，返回一个具有名为函数的对象扩展MarkdownIt此函数接收当前的 markdown-it 实例，并且必须返回一个新的 markdown-it 实例：

导入 * 为 vscode 来自 'vscode';

导出 函数 激活(上下文: vscode.扩展上下文) {
  返回 {
    扩展MarkdownIt(markdown: 任何) {
      返回 markdown.使用(要求('markdown-it-emoji'));
    }
  };
}

要贡献多个markdown-it插件，请返回多个使用语句链接在一起：

返回 md.使用(需要('markdown-it-emoji')).使用(需要('markdown-it-hashtag'));

贡献 markdown-it 插件的扩展在首次显示Markdown预览时才被懒加载激活。

markdown-emoji 扩展展示了如何使用 markdown-it 插件将表情符号支持添加到 markdown 预览中。您可以在 GitHub 上查看 Emoji 扩展的源代码。

您可能还希望查看：

• 指南 为markdown-it插件开发者
• 现有的 markdown-it 插件

通过脚本添加高级功能

对于高级功能，扩展可以贡献在Markdown预览中执行的脚本。

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

贡献的脚本异步加载，并在每次内容更改时重新加载。

该Markdown预览Mermaid支持扩展展示了使用脚本向markdown预览添加Mermaid图表和流程图支持。您可以在GitHub上查看Mermaid扩展的源代码。