Marp 幻灯片创作
Marp 是一个基于 Markdown 的幻灯片制作工具，可以将 Markdown 文档转换为美观的幻灯片。本文档将详细介绍如何创建 Marp 格式的幻灯片，包括基本语法、示例和注意事项。
基本概念¶
Marp 幻灯片由多个幻灯片页面组成，每个页面通过 --- 分隔。每页幻灯片可以包含标题、文本、图片、列表、表格等元素。
创建 Marp 文档¶
1. 使用模板创建¶
可以通过 Hugo 模板快速创建 Marp 文档：
hugo new -k marp content/zh/slide/new-presentation/marp.md
这将基于 archetypes/marp.md 模板创建一个新的 Marp 文档。
2. 手动创建¶
创建一个新的 Markdown 文件，并在文件顶部添加以下 front matter：
---
marp: true
theme: gaia
size: '16:9'
date: 2025-01-01
paginate: true
backgroundColor: white
lang: zh-Hans
style: |
/* 自定义 CSS 样式 */
---
文档结构¶
封面页¶
第一页通常是封面页，包含标题、副标题、作者和日期等信息：
# 幻灯片标题
**副标题/子标题**
作者姓名
2025-01-01
内容页¶
使用 --- 分隔不同的幻灯片页面：
---
## 第二页标题
这是第二页的内容。
- 列表项 1
- 列表项 2
- 列表项 3
---
## 第三页标题
这是第三页的内容。
结束页¶
最后一页通常是感谢页，可以使用特殊类名：
---
<!-- class: last -->
## Thank You
感谢聆听！
演讲备注¶
可以为每页幻灯片添加演讲备注，使用 HTML 注释语法：
<!--
这是第一页的演讲备注。
在这里可以写一些演讲时的提示和要点。
-->
# 幻灯片标题
---
<!--
这是第二页的演讲备注。
可以详细描述这页幻灯片的内容要点。
-->
## 第二页标题
图片处理¶
基本图片插入¶
图片样式类¶
根据图片内容和重要性，可以使用不同的样式类：
<!-- 大图片，用于重要架构图 -->
<div class="large-image">
</div>
<!-- 中等图片，用于流程图 -->
<div class="medium-image">
</div>
<!-- 小图片，用于图标或简单示意图 -->
<div class="small-image">
</div>
列表处理¶
对于较长的列表，应当根据内容长度拆分到多个页面：
---
## 特性列表
- 特性 1
- 特性 2
- 特性 3
- 特性 4
---
## 特性列表（续）
- 特性 5
- 特性 6
- 特性 7
- 特性 8
表格处理¶
对于较宽的表格，可以使用特殊的类来缩小字体：
---
<!-- class: small-font-table -->
| 列 1 | 列 2 | 列 3 | 列 4 | 列 5 |
|-----|-----|-----|-----|-----|
| 数据 1 | 数据 2 | 数据 3 | 数据 4 | 数据 5 |
代码块¶
Marp 支持代码高亮显示：
\```javascript
function hello() {
console.log("Hello, World!");
}
\```
布局技巧¶
两栏布局¶
<div class="flex-container">
<div class="column">
### 左栏内容
- 列表项 1
- 列表项 2
</div>
<div class="column">
### 右栏内容
- 列表项 3
- 列表项 4
</div>
</div>
生成幻灯片¶
创建完 Marp 文档后，使用 Marp CLI 生成 HTML 文件：
marp marp.md -o marp.html
最佳实践¶
内容组织¶
- 每页聚焦一个主题：避免在单页幻灯片中放入过多内容
- 使用简洁的语言：幻灯片上的文字应该是要点，而非完整句子
- 合理使用图片：图片可以帮助说明复杂概念，但不要过度使用
- 保持一致性：在整个演示文稿中保持字体、颜色和布局的一致性
演讲备注¶
- 详细描述内容：备注应该包含演讲时需要强调的要点
- 添加故事线：备注可以帮助构建演讲的故事线和逻辑流
- 提示过渡：在备注中添加页面之间的过渡提示
图片使用¶
- 合适的尺寸：使用合适尺寸的图片，避免过大或过小
- 保持清晰度：确保图片在投影时仍然清晰可读
- 添加说明文字：为重要图片添加说明文字
列表和表格¶
- 控制长度：避免过长的列表或过宽的表格
- 合理分页：将长列表或大表格拆分到多个页面
- 使用样式类：使用适当的样式类优化显示效果
注意事项¶
- 文件路径：确保所有引用的图片和其他资源使用正确的相对路径
- 编码格式：使用 UTF-8 编码保存文件以支持中文
- 浏览器兼容性：生成的幻灯片在现代浏览器中效果最佳
- 移动端适配：生成的幻灯片包含移动端优化样式
- 定期备份：定期备份重要的幻灯片内容
- 版本控制：将幻灯片源文件纳入版本控制系统
从博客创建幻灯片的特殊要求¶
当需要基于已完成的博客内容创建 Marp 格式的幻灯片时，需要遵循以下特殊要求：
- 内容完整性：幻灯片需要反映博客中的所有重要内容，确保信息不丢失
- 演讲备注：为每个页面添加详细的演讲备注，方便现场演示和演讲时参考
- 演示占位符：对于需要现场演示的内容，在相应页面添加占位符说明
- 图片处理：
- 遇到图片时，应将其单独放在一个幻灯片页面中
- 根据图片内容设置相应页面的标题
- 列表处理：
- 根据列表长度判断是否需要分页显示
- 如果列表过长无法在一页中完整显示，应将其切分到两个或多个页面中
- 备注格式：使用 HTML 注释的方式为每个页面编写演讲文字稿，方便照着朗读
- 封面信息：首页必须包含演讲者信息和日期
- 多功能用途：Marp 幻灯片不仅作为现场演讲稿，也可作为视频脚本用于录制幻灯片内容