如何在VS Code及Marp中配置markdown-it-attrs并导出PPT？

一、VS Code原生预览配置 #

VS Code内置Markdown预览基于markdown-it，要启用markdown-it-attrs插件，直接修改设置即可：

• 打开设置面板（快捷键Cmd + ,），搜索markdown.enabledExtensions
• 在数组中添加"markdown-it-attrs"，最终配置如下：

  "markdown.enabledExtensions": [
    "markdown-it-attrs"
  ]
  

• 保存设置后重启VS Code，此时在Markdown中添加{.style-me}这类语法，原生预览就能识别并应用自定义类。

二、Marp扩展配置 #

Marp有独立的markdown-it插件配置体系，需要单独设置：

1. 在VS Code设置中搜索marp.markdownItPlugins，添加"markdown-it-attrs"，配置示例：

   "marp.markdownItPlugins": [
     "markdown-it-attrs"
   ]
   

2. 引入自定义CSS样式
   要让样式在Marp预览和导出的PPT中生效，需在Markdown开头的Marp指令里定义样式：

   ---
   marp: true
   style: |
     .style-me {
       color: #e74c3c;
       font-size: 2rem;
       font-weight: bold;
     }
   ---
   
   # 测试标题 {.style-me}
   这是应用了自定义类的段落 {.style-me}
   

   也可以引用外部CSS文件：

   ---
   marp: true
   style: ./custom-styles.css
   ---
   

三、验证与排查 #

• 确认markdown-it-attrs已全局安装：执行npm install -g markdown-it-attrs
• 写完测试内容后，切换到Marp预览或原生预览，检查样式是否生效
• 若配置后仍不识别，重启VS Code确保插件加载完成
• 检查settings.json中的配置项是否有语法错误（比如引号、逗号缺失）

内容的提问来源于stack exchange，提问作者StopAndGo