如何扩展 VS Code 的 markdown-it 解析器以在其或 Marp 扩展的预览中使用 markdown-it-attrs 扩展并将其导出到 Powerpoint？

Question

在 VS 代码中，我想在 markdown 元素上定义自定义 css 类，以便输出到 Powerpoint 文件，我可以使用该文件向人群进行演示。在 HTML 中，我可以将 class="my-favorite-class" 添加到 HTML 元素，然后在 CSS 样式表中添加 .my-favorite-class。 markdown-it 解析器可以使用此功能进行扩展（请参阅https://github.com/arve0/markdown-it-attrs），该扩展的作者回复了之前的帖子，“我可以定义一个类吗？使用 Markdown 在段落上命名？” （参见我可以使用 Markdown 在段落上定义类名吗？），他列出了如果环境是 javascript，人们将如何做到这一点。

我没怎么用过 VS Code，但是如果他写的内容适用于 VS Code，我应该把他在回复中写的内容放在 VS Code 的哪里？如果它不适用，有没有办法让 VS Code 识别该 markdown-it-attrs 扩展并将大括号 {} 中定义的自定义类转换为 CSS 类，以用于 VS Code markdown 预览和VS code Powerpoint markdown 导出？

另外，如果我在 VS code 中使用 Marp markdown 插件，是否可以让它识别自定义定义的 CSS 类？如果访问 https://marpit.marp.app/usage?id=extend-marpit-by-plugins，有关于如何识别 markdown-it-container 扩展的说明（在 node.js 中）环境？），但是如何让该扩展或 markdown-it-attrs 扩展被 VS Code 中的普通 VS Code markdown 预览或 Marp 扩展 markdown 预览以及 Powerpoint 识别出口？

在这篇 Stack Overflow 帖子中（如何将 markdown-it-emoji 集成到 VS Code 中），Matt Bierner 提供了第 22916 期的 VS Code Github 链接（如何将 markdown-it-emoji 集成到 VS Code 中）。如果点击该链接，Matt 在 2017 年 7 月 17 日发布的帖子会显示“自最初提案以来，API 已略有变化”。最新的文档现在是 VS Code 文档的预发布版本：https://github.com/Microsoft/vscode-docs/blob/vnext/docs/extensionAPI/api-markdown.md'，但如果我点击该链接，我会收到 404。所以这对我来说是一个死胡同。如果我回到他关于 VS 代码表情符号扩展的说明，他的指示之一是“从扩展存储库安装 VSIX”，但我不确定他在可用的 Github 文件中指的是什么。

鉴于这一切，我不知道如何安装或设置 markdown-it-attrs，以便 VS code 预览和 Markdown 预览的 Marp 扩展都可以解释 markdown-it-attrs 方法以正确的方式向 Markdown 元素添加自定义 CSS 类，以及如何使用 VS Code 和 Marp 将预览导出到 Powerpoint 文件中。

凭借网络开发（除其他外）的背景，我希望拥有此功能来更轻松地为我将要做的向人群进行演示的工作开发演示文稿。如果我能让它工作，我认为它会比摆弄 Powerpoint 或 Keynote 程序要容易得多。请帮忙。

我在 Mac 上安装了 npm，然后安装了 markdown-it-attrs （我想在终端中使用“npm install --save markdown-it-attrs”。请参阅 https://www.npmjs.com/package /markdown-it-attrs）。然后我启动了 VS Code，并尝试将 {.style-me} 添加到 # Header 2 之后，而 VS Code Preview 并没有将其视为添加 .style-me 类。 Marp VS Code 扩展也没有。所以我不知道该怎么办。

Answer 1

要在 VS Code 中使用 markdown-it-attrs 扩展，您需要创建一个使用 markdown-it-attrs 的新 markdown 解析器，然后配置 VS Code 以使用该解析器。这可以通过为 VS Code 创建一个使用 markdown-it-attrs 扩展的新扩展来完成。然而，这个过程并不简单，需要一些 JavaScript 和 VS Code 扩展 API 知识。

对于 Marp markdown 插件，尚不清楚是否可以将其配置为识别使用 markdown-it-attrs 定义的自定义 CSS 类，因为 Marp 插件是一个单独的工具，使用自己的 markdown 解析器。

// vscode-markdown-it-attrs.js

const vscode = require('vscode');
const markdownIt = require('markdown-it');
const markdownItAttrs = require('markdown-it-attrs');

function activate(context) {
  // Use markdown-it to parse markdown
  const md = markdownIt({
    html: true,
    linkify: true,
    typographer: true,
  })
    .use(markdownItAttrs);

  // Register a new markdown preview provider
  vscode.workspace.registerTextDocumentContentProvider('markdown-it-attrs', {
    provideTextDocumentContent: (uri) => {
      const document = vscode.workspace.textDocuments.find(doc => doc.uri.toString() === uri.toString());
      if (document) {
        return md.render(document.getText());
      }
      return '';
    }
  });

  // Register a new command to open the markdown-it-attrs preview
  vscode.commands.registerCommand('markdown-it-attrs.openPreview', (uri) => {
   vscode.commands.executeCommand('vscode.previewHtml', URI, 
     vscode.ViewColumn.Two, 'Markdown with Attrs').then((success) => {
     }, (reason) => {
      vscode.window.showErrorMessage(reason);
    });
   });

  // Add a context menu item to open the markdown-it-attrs preview
  vscode.window.registerContextMenuProvider({
    provideContextMenu: (menu) => {
     menu.items.push({
      command: 'markdown-it-attrs.openPreview',
      title: 'Open Markdown with Attrs Preview',
      group: '1_preview'
    });
   }
 });
}

exports.activate = activate;