尝试以扩展 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 预览 GitHub 样式 扩展是一个很好的示例,演示了如何使用样式表使 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 预览 Mermaid 支持 扩展演示了如何使用脚本为 markdown 预览添加 Mermaid 图表和流程图支持。您可以在 GitHub 上查看 Mermaid 扩展的源代码。