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

简介: Marp 是一款基于 Markdown 的幻灯片制作工具,结合 VSCode 的强大编辑功能,可让你高效地创建专业 PPT。本教程将指导你如何在 VSCode 中安装 Marp 插件、配置主题和样式,并使用 Markdown 语法创建和美化幻灯片。内容包括基本结构、布局、图片与图表插入、表格制作,以及高级功能如动画效果、数学公式和代码高亮。最后,你将学会如何预览和导出幻灯片。

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 头信息来指定主题。例如:

---
marp: true
theme: uncover
---

  • 样式:你可以自定义 CSS 来改变幻灯片的外观。创建一个 styles.css 文件并在 Markdown 文件中引用:

---
marp: true
style: styles.css
---

创建你的第一个幻灯片

基本结构

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

  • 新幻灯片:在 Markdown 中使用 --- 来分隔不同的幻灯片。
  • 标题:使用 # 表示幻灯片标题。
  • 内容:正常的 Markdown 语法。

# 第一页幻灯片

这是第一页的内容。

---

# 第二页幻灯片

这是第二页的内容。

幻灯片布局

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

# 第一页幻灯片

---

vertical

# 第二页幻灯片

图片与图表

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

![图片描述](path/to/image.jpg)

  • 图表:可以使用 Mermaid 语法来插入图表。

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


表格

使用 Markdown 表格语法:

| 表头1 | 表头2 |
|--------|--------|
| 内容1  | 内容2  |
| 内容3  | 内容4  |

高级功能

动画效果

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

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

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

然后在 Markdown 中使用:

# 标题 {.fade-in}

数学公式

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

$$
E = mc^2
$$

代码高亮

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

```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 的更多功能,制作出更加精美的演示文稿吧!

目录
相关文章
|
6月前
|
搜索推荐 C++ 开发者
VSCode安装使用教程,保姆级!
本文介绍了Visual Studio Code(VS Code)的安装和基本使用,包括从官网下载安装包,按照步骤在Windows系统上安装,以及设置个性化主题。此外,还强调了安装插件以增强功能,例如安装简体中文插件,并展示了如何搜索和安装插件。VS Code作为一个免费、开源的轻量级编辑器,其丰富的扩展性和高效性使其成为开发者工具的首选。
|
1天前
|
前端开发 搜索推荐 C++
Marp 教程:如何在 VSCode 中引入自定义样式和主题
本文介绍了如何在 Marp 中引入自定义样式和主题,使你的幻灯片更加个性化和独特。首先,你需要安装 VSCode 和 Marp 插件,了解 Marp 的基本结构。接着,通过创建自定义 CSS 文件并在 Markdown 文件中引入,实现样式定制。此外,还可以创建和使用自定义主题,以及进行高级自定义,如调整布局、引入自定义字体和定义复杂动画。最后,使用 Marp 的预览功能实时查看效果。
10 0
|
2月前
|
编译器 C语言 C++
VSCode安装配置C语言(保姆级教程)
VSCode安装配置C语言(保姆级教程)
|
2月前
|
Linux C语言 C++
vsCode远程执行c和c++代码并操控linux服务器完整教程
这篇文章提供了一个完整的教程,介绍如何在Visual Studio Code中配置和使用插件来远程执行C和C++代码,并操控Linux服务器,包括安装VSCode、安装插件、配置插件、配置编译工具、升级glibc和编写代码进行调试的步骤。
338 0
vsCode远程执行c和c++代码并操控linux服务器完整教程
|
4月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
5月前
vscode 生成项目目录结构 directory-tree 实用教程
vscode 生成项目目录结构 directory-tree 实用教程
350 2
|
7月前
|
缓存 JavaScript 开发工具
【安装指南】VSCode搭建运行Vue的详细教程
【安装指南】VSCode搭建运行Vue的详细教程
2475 0
|
5月前
|
前端开发 JavaScript 开发工具
vscode教程(含使用技巧、保存时自动格式化文件等设置)
vscode教程(含使用技巧、保存时自动格式化文件等设置)
468 0
|
7月前
|
开发框架 人工智能 前端开发
【GitHub】github学生认证,在vscode中使用copilot的教程
【GitHub】github学生认证,在vscode中使用copilot的教程
914 4
|
7月前
|
编译器 开发工具 C语言
vscode安装+配置+使用+调试【保姆级教程】
vscode安装+配置+使用+调试【保姆级教程】
15600 6