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 小时前
IntelliJ IDEA修改实体类成员变量的名称(引入了该实体类的全部文件也会自动更新变量的名称)
java·ide·intellij-idea
MoonBit月兔2 小时前
双周报Vol.70: 运算符重载语义变化、String API 改动、IDE Markdown 格式支持优化...多项更新升级!
ide·算法·哈希算法
心之所向,自强不息5 小时前
关于Android Studio的Gradle各项配置
android·ide·gradle·android studio
Ven%10 小时前
VsCode如何使用默认程序打开word Excel pdf等文件
ide·vscode·pdf·编辑器
Silence4Allen11 小时前
VSCode 设置源代码根目录
ide·vscode·python·编辑器·pythonpath
张3蜂13 小时前
Jupyter Notebook 全面介绍:从原理到实战部署
ide·python·jupyter
深色風信子13 小时前
Eclipse 插件开发 2
java·ide·eclipse
mosepplin13 小时前
VSCODE 报错Fatal error: can‘t create CMakeFiles/hello_world.elf.dir/C_/Users/...
ide·vscode·编辑器
青松@FasterAI14 小时前
【动手学大模型开发】VSCode 连接远程服务器
服务器·ide·vscode
海天一色y16 小时前
Pycharm(十六)面向对象进阶
ide·python·pycharm