如何擴展 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;