Marp 教程:使用 VSCode 编写专业 PPT

Marp 教程:使用 VSCode 编写专业 PPT

简介

Marp 是 Markdown Presentation Ecosystem 的简称,它允许你使用 Markdown 语法来创建和展示幻灯片。通过结合 VSCode 的强大编辑功能,Marp 可以让你的 PPT 制作过程变得更加高效和专业。本教程将指导你如何在 VSCode 中使用 Marp 来创建精美的幻灯片。

安装与配置

1. 安装 VSCode

如果你还没有安装 VSCode,可以从 Visual Studio Code 官网 下载并安装。

2. 安装 Marp for VS Code 插件

  • 打开 VSCode。
  • 进入扩展市场(Extensions Marketplace),可以通过点击左侧活动栏上的扩展图标或按 Ctrl+Shift+X 打开。
  • 搜索 "Marp for VS Code" 并安装。

3. 配置 Marp

安装插件后,Marp 会自动配置好大部分设置,但你可以根据需要进行一些自定义:

  • 主题:Marp 支持多种主题,可以在 Markdown 文件顶部通过 YAML 头信息来指定主题。例如:

    markdown 复制代码
    ---
    marp: true
    theme: uncover
    ---
  • 样式 :你可以自定义 CSS 来改变幻灯片的外观。创建一个 styles.css 文件并在 Markdown 文件中引用:

    markdown 复制代码
    ---
    marp: true
    style: styles.css
    ---

创建你的第一个幻灯片

基本结构

Marp 使用 Markdown 语法,但有几个特定的语法来控制幻灯片的布局:

  • 新幻灯片 :在 Markdown 中使用 --- 来分隔不同的幻灯片。
  • 标题 :使用 # 表示幻灯片标题。
  • 内容:正常的 Markdown 语法。
markdown 复制代码
# 第一页幻灯片

这是第一页的内容。

---

# 第二页幻灯片

这是第二页的内容。

幻灯片布局

  • 水平布局:默认情况下,幻灯片是水平排列的。
  • 垂直布局 :使用 --- 后面加上 vertical 关键字来创建垂直排列的幻灯片。
markdown 复制代码
# 第一页幻灯片

---

vertical

# 第二页幻灯片

图片与图表

  • 图片:使用 Markdown 语法插入图片。

    markdown 复制代码
    ![图片描述](path/to/image.jpg)
  • 图表:可以使用 Mermaid 语法来插入图表。

    markdown 复制代码
    ```mermaid
    graph TD
    A[开始] --> B{决策}
    B -->|是| C[执行]
    B -->|否| D[结束]
    复制代码

表格

使用 Markdown 表格语法:

markdown 复制代码
| 表头1 | 表头2 |
|--------|--------|
| 内容1  | 内容2  |
| 内容3  | 内容4  |

高级功能

动画效果

Marp 支持一些简单的动画效果,通过 CSS 自定义:

css 复制代码
/* 在 styles.css 中 */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.fade-in {
  animation: fadeIn 1s;
}

然后在 Markdown 中使用:

markdown 复制代码
# 标题 {.fade-in}

数学公式

使用 LaTeX 语法来插入数学公式:

markdown 复制代码
$$
E = mc^2
$$

代码高亮

Marp 支持代码高亮,语法如下:

markdown 复制代码
```python
def hello_world():
    print("Hello, World!")
复制代码
## 预览与导出

- **预览**:在 VSCode 中,按 `Ctrl+Shift+V` 或点击右上角的预览按钮来查看幻灯片效果。
- **导出**:
  - 导出为 PDF:使用 `Marp: Export Slide Deck` 命令。
  - 导出为 HTML:直接保存 Markdown 文件为 HTML 格式。

## 总结

通过本教程,你已经学会了如何在 VSCode 中使用 Marp 来创建专业的幻灯片。Marp 结合 Markdown 的简洁性和 VSCode 的强大功能,使得 PPT 的制作变得更加直观和高效。继续探索 Marp 的更多功能,制作出更加精美的演示文稿吧!
相关推荐
花王江不语1 小时前
android studio 配置硬件加速 haxm
android·ide·android studio
喝可乐的布偶猫2 小时前
韩顺平之第九章综合练习-----------房屋出租管理系统
java·开发语言·ide·eclipse
DO ITNOW4 小时前
Cursor/VScode ,点击运行按钮,就打开新的终端,如何设置为在当前终端运行文件而不是重新打开终端----一招搞定篇
ide·vscode·编辑器
小妖6664 小时前
若 VSCode 添加到文件夹内右键菜单中显示
ide·vscode·编辑器
就爱瞎逛4 小时前
TailWind CSS Intellisense 插件在VSCode 上不生效
前端·css·vscode·tailwind
freshman_y4 小时前
VSCode遇到的一些小毛病(自动保存、运行后光标不再处于编辑区)
ide·vscode·编辑器
youngqqcn7 小时前
VSCode-Copilot的系统提示词
ide·vscode·copilot
GBXLUO8 小时前
windows的vscode无法通过ssh连接ubuntu的解决办法
vscode·ubuntu
木头没有瓜8 小时前
idea离线安装插件
java·ide·intellij-idea
ncj39343790612 小时前
vscode中对node项目进行断点调试
vscode·node.js