如何扩展 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 ），并且该扩展的作者回复了之前的帖子，“我可以定义一个 class 名称吗？使用 Markdown 的段落？” （请参阅我可以使用 Markdown 在段落上定义一个 class 名称吗？ ），并且他列出了如果一个人的环境是 javascript 将如何做到这一点。

我使用 VS Code 的次数不多，但如果他在那里写的内容适用于 VS Code，我会把他在回复中写的内容放在 VS Code 的什么地方？ 如果它不适用，有没有办法让 VS Code 识别 markdown-it-attrs 扩展并将大括号 {} 中定义的自定义类转换为 CSS 类，以便 VS 代码 markdown 预览和VS 代码 Powerpoint markdown 导出？

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

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

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

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

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

Answer 1

要在 VS Code 中使用 markdown-it-attrs 扩展，您需要创建一个使用 markdown-it-attrs 的新解析器 markdown，然后配置 VS Code 以使用该解析器。 这可以通过为使用 markdown-it-attrs 扩展的 VS Code 创建一个新扩展来完成。 然而，这个过程并不简单，需要一些 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;