Marp 幻灯片功能展示

一份用来快速查看模板能力的示例：分页、动画、图片、背景、媒体、链接、表格、代码、公式和备注。

这份展示覆盖什么

• 分页和页面 class

• 翻页转场

• 列表逐条出现

• 图片、背景图和滤镜

• 音频、视频和链接

• 表格、代码和公式

• 页眉页脚和备注

• 资源目录约定

分页：用 ## 开始新页

当前文件头部使用：

headingDivider: 2

所以每一个二级标题都会生成一页新幻灯片。需要临时强制分页时，也可以使用：

---

内容渐进与转场

这一页使用了 section-title 和当前页转场 _transition: slide。

列表逐条出现

使用 * 作为列表标记时，在 HTML 展示中会逐条出现：

• 第一步：先说结论
• 第二步：补充证据
• 第三步：给出下一步

普通 - 列表会一次性出现，更适合常规内容页。

翻页转场

这页设置了当前页转场：

<!-- _transition: cover -->

也可以在文件头部设置全局转场：

transition: fade

常用转场包括 fade、slide、cover、zoom、flip、wipe、none。

图片：尺寸和滤镜

常用写法

![w:500](assets/sample-chart.svg)
![h:320](assets/sample-chart.svg)
![brightness:.9](assets/photo.jpg)

资源放在本幻灯片自己的 assets/ 目录中。

背景图可以承载视觉主题

<img class="visual-bg visual-bg-dark" src="assets/cover-grid.svg" alt="">

再叠加文字、列表、引用或代码块。

左右分割背景

背景也可以分栏

![bg right:43% contain](assets/sample-chart.svg)

• left / right 控制位置
• 40% 控制占比
• cover / contain 控制缩放方式

链接

普通链接：

返回幻灯片索引

外部链接：

Marpit 官方文档

图片链接：

音频和视频

音频

<audio controls src="assets/sample-tone.wav"></audio>

视频

<video controls poster="assets/media-poster.svg" src="assets/demo.mp4"></video>

示例里没有放置真实视频文件；添加视频时把 demo.mp4 放入当前 assets/，再补上 src。

代码块

const deck = {
  source: 'available/slides/features-showcase/index.md',
  enabled: true,
  output: 'dist/slides/features-showcase/index.html',
}

console.log(`Build ${deck.output}`)

主题会自动给代码块使用深色背景。

命令示例

make new my-topic
make enable my-topic
make build
make run

make enable 会维护 src/slides 中的符号链接，并自动构建 dist。

数学公式

行内公式：当 $a^2 + b^2 = c^2$ 时，三角形是直角三角形。

块级公式：

$$\operatorname{score}(deck)= \frac{\text{clarity}+\text{evidence}+\text{flow}}{3}$$

本示例使用 math: katex。

HTML 和自定义组件

页脚、页码和隐藏页码

这一页使用：

<!-- _paginate: false -->
<!-- _footer: "当前页隐藏页码，并使用临时页脚" -->

_paginate 和 _footer 只影响当前页。

这份文件可以当作功能速查

复制页面片段到自己的幻灯片里，再替换内容和资源即可。