使用 Marp 和 Markdown 快速制作幻灯片
Marp 是一款基于 Markdown 的开源工具,可以用来快速创建专业的幻灯片。它兼容 Markdown 的语法,并提供了额外的功能来实现幻灯片的定制化,非常适合技术演示、课堂讲义和快速分享内容。
更多Marp幻灯片应用,详见【精彩回顾】往期Stata初高级专题课--板书截图
以下是使用 Marp 制作幻灯片的步骤:
1. 安装 Marp
使用 VS Code 插件
安装 VS Code。 在扩展市场中搜索 Marp for VS Code 并安装。 安装后,你可以在 VS Code 中编辑 Markdown 幻灯片并实时预览。
2. 基本语法
定义幻灯片
每张幻灯片用 ---
分隔。例如:
# 第一张幻灯片
这是第一页内容
---
# 第二张幻灯片
这是第二页内容
添加标题和段落
# 幻灯片标题
这是正文内容。
- 项目符号 1
- 项目符号 2
3. 幻灯片主题与样式
主题切换
在文件顶部添加以下元数据,可以设置幻灯片主题(default
、gaia
、uncover
等):
---
marp: true
theme: gaia
paginate: true
---
# 幻灯片标题
marp: true
:激活 Marp 功能。theme: gaia
:设置幻灯片的主题。paginate: true
:在幻灯片底部添加页码。
自定义背景
为某张幻灯片添加背景图片或颜色:
---
backgroundColor: #1e1e1e
backgroundImage: url('https://example.com/image.png')
---
# 标题
带有背景图片的幻灯片。
4. Markdown 特性支持
图片
![图片描述](https://example.com/image.png)
表格
| 标题1 | 标题2 |
|-------|-------|
| 数据1 | 数据2 |
代码块
```python
print("Hello, Marp!")
#### 分栏布局
使用 HTML 支持多列布局:
```markdown
<div style="display: flex; justify-content: space-between;">
<div>左侧内容</div>
<div>右侧内容</div>
</div>
5. 导出幻灯片
PDF 导出: HTML 导出:使用 VS Code ,将 Markdown 文件转换为PDF或者 HTML 格式。
6. 示例代码
---
marp: true
theme: uncover
paginate: true
---
# 欢迎使用 Marp
创建专业的幻灯片从未如此简单!
---
## 第二张幻灯片
- 支持 **Markdown**
- 易于使用
- 支持多种导出格式
---
## 代码示例
```stata
sysuse "auto.dta", clear //打开auto美国1978年汽车行业横截面数据
7. 进阶布局和样式
使用自定义字体
你可以指定自定义字体以增强视觉效果:
---
theme: gaia
style: |
section {
font-family: "Arial", sans-serif;
}
---
# 自定义字体
8. 动画效果
虽然 Marp 不直接支持动画,但你可以通过多个幻灯片模拟过渡效果。例如:
---
marp: true
---
# 第一步
显示第一条内容。
---
# 第二步
显示更多内容。
9. 添加页码
页码
通过元数据开启页码显示:
---
marp: true
paginate: true
---
# 带页码的幻灯片
10. 导出高级格式
导出 HTML
在 VS Code 中,点击右上角预览按钮旁的“导出”按钮,选择 Export as HTML。这将生成一个独立的 HTML 文件,可以直接分享。
自定义导出尺寸
如果需要更改幻灯片尺寸(例如宽屏),可以在元数据中设置:
---
marp: true
size: 16:9
---
# 宽屏幻灯片