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

Question

In VS code, I would like to define custom css classes on markdown elements for outputting to a Powerpoint file that I could use for giving presentations to groups of people. In HTML, I could add class="my-favorite-class" to an HTML element and then have.my-favorite-class in the CSS style sheet. The markdown-it parser can be extended with this functionality (see https://github.com/arve0/markdown-it-attrs ), and the author of that extension responded to an earlier post, "Can I define a class name on paragraph using Markdown?" (see Can I define a class name on paragraph using Markdown? ), and he laid out how one would do this if one's environment were javascript.

I have not used VS Code much, but if what he wrote there applies to VS Code, where would I put in VS Code what he wrote in his response? If it does not apply, is there a way to get VS Code to recognize that markdown-it-attrs extension and convert the custom classes defined in curly brackets {} to be interpreted as CSS classes for the purpose of the VS code markdown preview and VS code Powerpoint markdown export?

Also, if I were to use the Marp markdown plugin in VS code, would it be possible to get it to recognize the custom defined CSS classes? If one goes to https://marpit.marp.app/usage?id=extend-marpit-by-plugins there are directions for how to get the markdown-it-container extension to be recognized (in a node.js environment?), but how would one get that extension or the markdown-it-attrs extension to be recognize by the vanilla VS Code markdown preview or the Marp extension markdown preview in VS code, and also for Powerpoint export?

In this Stack Overflow post ( How to integrate markdown-it-emoji into VS Code ), Matt Bierner gave a VS Code Github link for issue 22916 ( How to integrate markdown-it-emoji into VS Code ). If one clicks on that link, Matt's July 17, 2017 post has 'The API has changed slightly since the initial proposal. The most up to date documentation is now in a pre-release version the VS Code docs: https://github.com/Microsoft/vscode-docs/blob/vnext/docs/extensionAPI/api-markdown.md' , but if I click on that link, I get a 404. So that was a dead end for me. If I go back to his instructions for the emoji extension for VS code, one of his directions is to 'Install the VSIX from the extension repo', but I am not sure what he is referring to in the Github files available.

In light of all this, I am at a loss as to how to get the markdown-it-attrs installed or set up such that VS code preview and the Marp extension for Markdown preview would both interpret the markdown-it-attrs method of adding custom CSS classes to markdown elements in the proper way, and also how to get VS Code and and Marp to export the preview into a Powerpoint file.

With a background in web development (among other things), I would love to have this functionality to more easily develop presentations for the work that I will be doing in giving presentations to groups of people. If I can get it work, I think it could be significantly easier than fiddling with Powerpoint or Keynote programs. Please help.

I installed npm on my Mac, and then installed the markdown-it-attrs (I think with the "npm install --save markdown-it-attrs" in Terminal. See https://www.npmjs.com/package/markdown-it-attrs ). Then I started VS Code, and I tried putting {.style-me} after # Header 2 and VS Code Preview did not treat that as adding a.style-me class. Neither did the Marp VS Code extension. So I don't know what to do.

Answer 1

To use the markdown-it-attrs extension in VS Code, you would need to create a new markdown parser that uses markdown-it-attrs and then configure VS Code to use that parser. This can be done by creating a new extension for VS Code that uses the markdown-it-attrs extension. However, this process is not straightforward and requires some knowledge of JavaScript and the VS Code extension API.

As for the Marp markdown plugin, it is not clear if it can be configured to recognize custom CSS classes defined with markdown-it-attrs, as the Marp plugin is a separate tool that uses its own markdown parser.

// 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;