Marp 和 Markdown 快速制作幻灯片

学术   2024-12-20 15:58   陕西  

使用 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. 幻灯片主题与样式

主题切换

在文件顶部添加以下元数据,可以设置幻灯片主题(defaultgaiauncover 等):

---
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
---


# 宽屏幻灯片

重磅:关于Marp制作幻灯片PPT的样式,可以查看往期Stata课程中用到的课件PPT


数量经济学
见证计量经济学发展,更懂计量更懂你!
 最新文章