尝试以扩展 VS Code 中的代理模式!

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 上查阅该表情符号扩展的源代码。

你可能还想查阅

使用脚本添加高级功能

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

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

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

Markdown Preview Mermaid Support 扩展展示了如何使用脚本为 Markdown 预览添加 Mermaid 图和流程图支持。你可以在 GitHub 上查阅该 Mermaid 扩展的源代码。