如何在VSCode的Marp扩展中添加.theorem自定义CSS类

按以下步骤操作即可让自定义定理样式正常生效：

• 第一步先开启Marp的HTML渲染权限：按Ctrl+,（Windows/Linux）或Cmd+,（Mac）打开VSCode设置，搜索「Marp: Enable HTML」，勾选对应选项，允许Marp识别自定义类名和HTML标签。
• 第二步配置自定义CSS，可二选一：
  • 全局生效：搜索「Marp: Custom CSS」，把你提供的CSS代码完整粘贴到该配置项的输入框后保存即可，所有Marp幻灯片都会共用该样式。
  • 仅当前项目生效：在幻灯片文件最开头的Marp前言块后嵌入样式代码，示例如下：

    ---
    marp: true
    ---
    
    <style>
    .theorem {
      display: block;
      font-style: italic;
    }
    .theorem:before {
      content: "Theorem. ";
      font-weight: bold;
      font-style: normal;
    }
    .theorem[text]:before {
      content: "Theorem (" attr(text) ") ";
    }
    </style>
    

样式调用方法 #

配置完成后直接在幻灯片内容里用带对应class的div标签即可使用：

<!-- 基础定理块 -->
<div class="theorem">
  任意三角形内角和为180度。
</div>

<!-- 带自定义名称的定理块 -->
<div class="theorem" text="勾股定理">
  直角三角形两条直角边的平方和等于斜边的平方。
</div>

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