Marp: 基于 Markdown 的 PPT 制作

type

status

date

slug

summary

一、缘起

在学术工作中，经常需要做一些汇报，对于日常的学术汇报，只需要对 PPT 做一些简单的排版，并不需要设置复杂的动画等。因此，使用 Marp 等工具，将 Markdown 直接转为 PPT，可以让我们从无止境的重复排版工作中解脱出来。

Marp 自带的一些格式相对简单，不太能体现学校的元素。因此，笔者参考青柠学术的高校模板计划，自定义了哈工大风格的 CSS 主题模板。在本文的第二部分将简单介绍 Markdown 语法，以及对应的效果。在第三部分，将简要介绍 CSS 文件的代码配置。如果你想快速体验 Marp，可以直接阅读本文的第四部分，简单四步即可在 VSCode 和 Obsidian 中使用。

二、渲染效果与 Markdown 语法

点击下载 PDF 文件查看渲染效果。

Markdown 的常用语法中，mermaid 暂时无法通过 Marp 渲染，其他的基本语法都支持。在设置中启用 HTML 后，HTML语法也都支持，不启用的情况下仅支持 br 标签的 HTML 语法。YAML 区的设置也非常简单，marp: ture 表明启用 Marp，theme: HIT 声明启用的主题是 HIT， headingDivider: 1 声明在每个一级标题前分页，paginate: ture 声明启用页码。渲染上述文件启用的完整 Markdown 语法如下所示。

三、CSS 主题文件

点击下载本文所使用的 CSS 文件。

如果你希望自定义其他高校风格的 CSS 主题模板文件，你只需要对代码的两个部分进行修改。

第一部分是，代码的主题名称。在 CSS 文件的第一行，你可以将 HIT 修改为其他主题名称，该名称就是在 Markdown 文件的 YAML 区设置 theme 时需要引用的主题名称。

第二部分是，CSS 文件的root 区。

字体部分

--font-family-title ：标题所使用的字体，本文使用的是朱雀仿宋（预览测试版）。
--font-family-main ：主要内容所使用的字体，本文使用的是霞鹜文楷。
--font-family-code ：代码部分所使用的字体。
系统未安装的字体需要安装后方可使用，否则将使用默认字体。

颜色部分

--color-theme：主题颜色。标题均使用主题颜色渲染。
--color-code-bg：代码块的背景颜色。

图片部分

--img-cover：封面页的左侧图片。
--img-content：目录页的左侧图片。
--img-school-logo：每页右上角的学校 logo。
--img-school-motto：结束页右侧上部的校训。
URL 可以使用图床链接，也可以使用本地文件，使用本地文件时需要填写图片所在的绝对路径。

四张图片均需要对颜色和内容进行修改，其中--img-cover、--img-content 两个图片可以下载模板 PPT 后通过 PowerPoint 修改校徽和颜色。由于不同的logo、校徽、校训图片尺寸可能不同，可能需要对图片布局略作调整，修改 CSS 文件代码中带有“background”的标签属性即可，设置方法详询 ChatGPT。

四、在 VSCode 和 Obsidian 中使用 Marp

在 VSCode 中使用 Marp：

在 VSCode 的应用市场搜索并安装 Marp for VSCode

在设置中搜索“marp html”，启用“Marp: Enable HTML”

在设置中搜索“marp themes”，添加 CSS 主题文件，你可以输入 CSS 文件所放置位置的绝对路径，也可以使用图床链接，如：https://image-hosting-walton.oss-cn-beijing.aliyuncs.com/file/Marp_HIT.css

点击右上角的 Marp 图标选择需要导出的格式即可。

在 Obsidian 中使用 Marp：

在 Obsidian 中使用 Marp 需要安装 Marp CLI，安装方法参考官方 GitHub 仓库。

在 Obsidian 的应用市场中搜索并安装 Marp Slides （另一个插件 Marp 目前不能启用 HTML 语法），安装完成后重启 Obsidian。

将 CSS 主题文件存放在 Obsidian 的工作区文件夹内。

打开 Marp Slides 的设置，启用 “Enable HTML”选项，并在“Theme Path”输入 CSS 主题的文件夹路径。

使用快捷键Ctrl/Cmd + P 运行命令，并搜索“marp”，选择合适的命令即可。

VSCode 和 Obsidian 对 Marp 的支持都还不错，两个软件都可以预览 PPT，不过相对而言 VSCode 的预览模式相对完善，可以预览图片并随光标滚动。