2.1 所需工具#

1. Markdown 编辑器：推荐使用以下两种

   • VS Code：下载地址
   • Obsidian：下载地址

2. 插件安装

   • VS Code 用户：安装 Marp for VS Code
   • Obsidian 用户：安装 Marp Slides 插件

3. 字体（可选但推荐）

   • 正文字体：Latin Modern Math、方正宋刻本秀楷简体（未安装时默认使用 Calibri 和 楷体）
   • 标题字体：Optima LT Medium、方正苏新诗柳楷简体（未安装时默认使用 Arial 和 黑体）
   • 脚注字体：Charm 和 叶根友毛笔行书修正版（未安装时默认使用 Calibri 和 楷体）
   • 代码字体：Fira Code 和 霞鹜文楷等宽（未安装时默认使用 Consolas 和 华文中宋）
   • 字体文件打包下载:
     • 字体文件下载链接

2.2 准备工作#

1. 将 Awesome-Marp 文件夹下载到本地
   • 下载链接
   • 推荐在终端使用git clone https://github.com/favourhong/Awesome-Marp.git拉取仓库,或者先fork一份到自己的GitHub上再拉取
2. VS Code 用户：直接使用 VS Code 打开整个 Awesome-Marp 文件夹
3. Obsidian 用户：配置 Marp Slides 插件并设置对应的 CSS 路径

3.1 基本设置#

创建一个新的 .md 文件，在文件顶部添加 YAML 前置元数据：

1
---
2
marp: true          # 启用 Marp
3
size: 16:9          # 幻灯片比例（16:9 或 4:3）
4
theme: am_blue      # 选择主题颜色（am_blue, am_dark, am_green, am_red, am_brown, am_purple）
5
paginate: true      # 显示页码
6
headingDivider: [2,3] # 使用二级和三级标题自动分页
7
footer: \ *你的名字* *演讲标题* *日期*  # 设置页脚内容
8
---

3.2 创建封面页#

1
<!-- _class: cover_a -->
2
<!-- _header: "" -->
3
<!-- _footer: "" -->
4
<!-- _paginate: "" -->
5

6
# 你的演讲标题
7

8
###### "演讲副标题"
9

10
@你的名字
11
机构名称
12
日期：2025 年 5 月 9 日
13
联系方式

3.3 添加目录页#

1
<!-- _class: cols2_ol_ci fglass toc_a  -->
2
<!-- _footer: "" -->
3
<!-- _header: "CONTENTS" -->
4
<!-- _paginate: "" -->
5

6
- [第一章](#3)
7
- [第二章](#10)
8
- [第三章](#15)
9
- [第四章](#20)

3.4 内容页面创建#

每个内容页面使用 ## 或 ### 开始（根据 headingDivider 设置）：

1
## 第一章
2

3
这里是第一章的内容，可以使用普通的 Markdown 语法：
4

5
- 列表项 1
6
- 列表项 2
7
- 列表项 3
8

9
> 这是一个引用

4.1 页面分栏#

Awesome Marp 提供了多种分栏方式：

1
<!-- _class: cols-2 -->
2

3
<div class=ldiv>
4
左侧内容
5
</div>
6

7
<div class=rdiv>
8
右侧内容
9
</div>

1
<!-- _class: cols-2-64 -->
2

3
<div class=ldiv>
4
左侧内容（占60%）
5
</div>
6

7
<div class=rdiv>
8
右侧内容（占40%）
9
</div>

1
<!-- _class: cols-3 -->
2

3
<div class=ldiv>
4
左侧内容
5
</div>
6

7
<div class=mdiv>
8
中间内容
9
</div>
10

11
<div class=rdiv>
12
右侧内容
13
</div>

1
<!-- _class: rows-2 -->
2

3
<div class="timg">
4
顶部内容
5
</div>
6

7
<div class="bimg">
8
底部内容
9
</div>

4.2 列表分列#

1
<!-- _class: cols2_ol_ci fglass -->
2

3
- 第一项
4
- 第二项
5
- 第三项
6
- 第四项

4.3 引用盒子#

1
<!-- _class: bq-blue -->
2

3
> 这是一个蓝色的引用盒子
4
>
5
> 第二行内容

可选的引用盒子样式：bq-purple、bq-blue、bq-green、bq-red、bq-black

4.4 导航栏#

1
<!-- _class: navbar -->
2
<!-- _header: \ ***@标题*** *第一章* *第二章* **当前章节** *第四章* -->
3

4
当前页面内容

4.5 其他样式#

• 固定标题样式：fixedtitleA、fixedtitleB
• 文字大小调整：tinytext、smalltext、largetext、hugetext
• 图片标题：caption
• 脚注样式：footnote
• 过渡页面：trans
• 最后一页：lastpage

5.1 基本插入#

1
![图片描述](图片路径)

5.2 图片对齐与大小控制#

1
![#c](图片路径)  <!-- 居中对齐 -->
2
![#l](图片路径)  <!-- 左对齐 -->
3
![#r](图片路径)  <!-- 右对齐 -->
4

5
![#c w:500](图片路径)  <!-- 指定宽度为500px -->
6
![#c h:300](图片路径)  <!-- 指定高度为300px -->

6.1 使用 VS Code#

1. 打开命令面板（按下 Ctrl+Shift+P 或 F1）
2. 输入并选择 Marp: Export slide deck...
3. 选择导出格式（PDF、HTML、PPTX 等）
4. 选择保存位置

6.2 使用命令行（需安装 @marp-team/marp-cli）#

1
# 导出为 PDF
2
npx @marp-team/marp-cli --pdf 你的文件.md
3

4
# 导出为 HTML
5
npx @marp-team/marp-cli --html 你的文件.md
6

7
# 导出为 PPTX
8
npx @marp-team/marp-cli --pptx 你的文件.md

6.3 使用 Obsidian#

如果已安装 Marp Slides 插件，可在 Obsidian 中直接导出。

8.1 如何修改主题样式？#

如果您想修改主题样式，可以编辑 themes 文件夹中对应的 CSS 文件。例如，修改 am_blue.scss 可以自定义蓝色主题的样式。

8.2 如何在不同主题之间切换？#

只需在 YAML 前置元数据中修改 theme 属性即可：

1
theme: am_purple  # 切换到紫色主题

8.3 如何组合多种样式？#

在一个页面中使用多种样式，只需在 _class 指令中用空格分隔：

1
<!-- _class: cols-2 fglass -->