Markdown 扩展

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

使用 CSS 更改 Markdown 预览的外观

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

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

"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 预览时，提供 Markdown-it 插件的扩展会被延迟激活。

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

您可能还想查看：

Markdown-it 插件开发人员指南
现有的 markdown-it 插件

使用脚本添加高级功能

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

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

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

Markdown Preview Mermaid 支持扩展演示了如何使用脚本将Mermaid图表和流程图支持添加到 Markdown 预览中。您可以在GitHub上查看 Mermaid 扩展的源代码。

11/1/2023