—原创文章，未经允许，严禁转载—

于我而言，和PPT打交道已经有很多年。我用过很多工具，还有各种资源网站。近些年在很多时候愈发感觉PPT的形式似乎超过了内容本身，个人认为有一种海报化的倾向，好看的PPT就要有好的排版、配色、配图，甚至设计，当然曾经我也乐此不疲，为此耗费了很多心血，这些在一定程度上也催生了PPT设计制作相关产业。近几年，我一直在试图追求PPT的另一些极致，我想可以分为两个方面：内容的极致和交互的极致。内容的极致在于将绝大部分的精力放在PPT的内容上，突出高质量内容和快速化制作；交互的极致在于运用更好的形式、工具优化信息传播的效果，超越仅仅基于外观设计的交互体验，突出交互性感受和高效的知识传播。

因为工作需要，最近接触了一些制作PPT的工具，有一款工具Marp比较亮眼，应用得当的话，能够有效地帮助我们追求内容的极致，以尽可能小的代价去获得还不错的PPT外观。

效果速览

效果预览基于Marp for VS Code工具（下文有详细介绍），使用了我自定义的主题（不一定美观，主要为了实用），有兴趣的话，每个人都可以创建自己的主题。

首先要输入一些控制指令，以下4行内容分别代表使用marp、使用yj1主题、打开页码、设置背景颜色为#0099FF，非常简单和明确。

---
marp: true
theme: yj1
paginate: true
backgroundColor: #0099FF
---

PPT封面

接着键入以下内容，该工具即可自动渲染出PPT的封面。符号内的指令分别代表：使用cover(封面)类、这一页不显示页码、文本颜色为#fff(纯白色)。![bg](图片的链接)插入了一张背景图片。#后是想展示的文字。<br/>是换行的意思，控制每行内容的间距。键入内容的过程中，无需考虑格式上的小细节，最终渲染的效果是令人满意的（在排版和格式上并没花费什么心思）。

---

<!-- 
_class: cover
_paginate: skip
_color: #fff
-->
![bg](https://www.toopic.cn/public/uploads/small/1658046925595165804692570.png)
<br/><br/><br/><br/><br/>
# 演示主题
<br/><br/><br/>
## 单位
## 汇报人
## 202X年XX月XX日

专注内容：一个写PPT的利器 — Marp

PPT展示页面1

键入以下内容，将自动渲染出相应页面。符号内的指令分别代表：页面最上面内容为“标题”、页面最下面无内容。其他也是Markdown的基础语法，用简单的几个符号即赋予文本丰富的格式，在传统的PPT工具中实现这些效果并不是如此简捷的，不需要频繁地选中内容、设置格式、拖动位置、创建背景图块等等。

---

<!--
header: '*标题*'
footer: ' '
-->
# 这是一级标题，字号最大， **可以将其加粗，用醒目的主题色显示，** *或者以斜体来显示更丰富的效果，* `用反引号括住内容将以行内代码的形式显示，这非常实用！` ， 当然这些效果可以叠加使用，比如***加粗斜体*** 、*`斜体行内代码`*。

## 这是二级标题，字号适中，**可以将其加粗，用醒目的主题色显示，** *或者以斜体来显示更丰富的效果，* `用反引号括住内容将以行内代码的形式显示，这非常实用！` ， 当然这些效果可以叠加使用，比如***加粗斜体*** 、*`斜体行内代码`*。

### 这是三级标题，字号较小，**可以将其加粗，用醒目的主题色显示，** *或者以斜体来显示更丰富的效果，* `用反引号括住内容将以行内代码的形式显示，可以突出显示一些重点内容！` ， 当然这些效果可以叠加使用，比如***加粗斜体*** 、*`斜体行内代码`*。

四级、五级标题未设置显示样式，默认不显示，请不用使用。六级标题在此主题中可用于插入空行，控制前后文间距，或者使用`<br/>`标签换行，更推荐使用后者。

专注内容：一个写PPT的利器 — Marp

PPT展示页面2

键入以下内容，将自动渲染出相应页面。在传统的PPT工具中实现这些效果更加不易。

---
<!--
header: '*引用块、默认插图*'
footer: ' '
-->
> 这是一个引用块，将突出显示块中的内容。
> 它是一个容器，可以放入很多内容：
> - 各级标题
> - 正文
> - 列表
> - 图片

以下是插图示例，多张图片请在一行内插入，可用任意字符调整图片位置及间距（已预设字符无颜色），推荐使用`=`。

=================![h:300px](https://fakeimg.pl/600x600/0288d1/fff/?text=A)===![w:400px h:300px](https://fakeimg.pl/800x600/02669d/fff/?text=B)

专注内容：一个写PPT的利器 — Marp

以上这些展示中，除了运用几个有限的符号，用户需要关注的基本上完全是内容本身。更多的效果展示可以看我设计的主题。如果你对这个工具感兴趣，可以仔细学习下面的内容。

Marp简介

Marp: Markdown Presentation Ecosystem是一款利用Markdown文件制作幻灯片的工具，其实是将Markdown文件转换为幻灯片，主要特点：

基于Markdown（可以非常自然地运用Markdown的特点及优势，让我们更关注内容本身）
支持内置主题和自定义主题（尽可能减少幻灯片外观设计的成本）
支持多种内容：图像、公式、表情、代码等（紧跟时代，方便地承载更多信息）
可导出html、PPT、PDF（赋予演示的更多可能，特别是使用网页进行演示）

工具介绍

目前，Marp已经成为一个工具的合集，主要包括有5个工具或集成：Marp for VS Code、Marp CLI、Marp Core、Marpit framework和web平台。

工具	简介	特点	操作及适用群体
Marp for VS Code	VS Code的插件，功能强大的Marp工具	安装使用方便，具备语法感知功能，支持实时预览、导出不同格式，可使用丰富的主题。	仅需关注`markdown`文件和`css`文件，适合普通用户使用。
Marp CLI	CLI界面，功能丰富强大的Marp工具	基于`Node.js`，支持导出不同格式，支持查看、服务器和预览模式，转换模板和引擎选择更为灵活。	需使用`shell`命令，适合有一定电脑基础的用户使用。
Marp Core	各类Marp工具的核心引擎，基于Marpit框架	基于`Node.js`，相比Marpit扩展了部分功能：支持主题、公式及表情等。	需编写`js`代码，适合开发人员使用和进一步开发。
Marpit framework	`md`to`html`的转换框架，最为精简和基础	基于`Node.js`，初衷是作为核心转换引擎的基础，仅能转换为html，无主题。	需编写`js`代码，适合开发人员使用和进一步开发。
Marp在线应用	官方web平台，提供相对基础的Marp功能	无需任何安装即可直接在线使用，支持实时预览和导出多种格式文件。	适合普通用户试用和简单地试用。

对于普通用户来说，使用Marp for VS Code 无疑是最方便快捷直观且功能丰富的。

Marp for VS Code的安装使用

Marp for VS Code是一款VS Code插件，使用户可直接在VS Code中通过编辑Markdown文件来编写幻灯片。最为便捷和简单，但功能十分强大，支持实时预览、语法智能感知、导出多种格式文件和使用丰富的主题，是非开发人员使用Marp的不二之选。

在VS Code扩展市场中搜索Marp for VS Code并安装。在Markdown文件头部进行marp: true声明即可自动启动Marp，点击界面右上角的预览和导出按钮即可实现对应操作。

专注内容：一个写PPT的利器 — Marp

---
marp: true

---
# 第一页
现在可以开始编写你的内容。

Markdown是什么？

在开始使用Marp之前，非常有必要了解Markdown的基本知识。

Markdown 是一种轻量级的标记语言，可用于在纯文本文档中添加格式化元素，如今已成为世界上最受欢迎的标记语言之一。再直白一点，就是可以在编写内容是同步运用简单的符号进行标记，可以被主流的软件渲染为非常美观的文档。

专注于文字内容；
纯文本，易读易写，可以方便地纳入版本控制；
语法简单，没有什么学习成本，能轻松在码字的同时做出美观大方的排版。

如何编写Markdown文件

使用文本编辑器或 Markdown 专用的应用程序创建 Markdown 文件，文件扩展名为 .md 或 .markdown。
在 Markdown 应用程序中打开 Markdown 文件，进行编写。
可以使用 Markdown 应用程序将 Markdown 文件转换为 HTML 文档。（如果使用Marp，则Marp将Markdown 文件转换为幻灯片）

基本语法

只需知道几个最基本的语法即可。

元素	Markdown 语法
标题（Heading）	`# 一级标题 ## 二级标题 ### 三级标题`
粗体（Bold）	`加粗内容`
斜体（Italic）	`斜体内容`
引用块（Blockquote）	`> 引用块内容`
有序列表（Ordered List）	`1. 列表项1` `2. 列表项2` `3. 列表项3`
无序列表（Unordered List）	`- 列表项1 - 列表项2 - 列表项3`
代码（Code）	`代码`
分隔线（Horizontal Rule）	`---`
链接（Link）	`[文本](https://www.example.com)`
图片（Image）	`![替换文本](image.jpg)`

怎么编写Marp幻灯片

使用Marp工具编写幻灯片，就是在编写Markdown文档。Marp工具以Markdown语法为基础，另外引入了一些指令和特殊内容语法。为更全面和实用，此部分内容仍以Marp for VS Code工具为基础，主要内容亦可参考Marpit官方文档。

文档结构

文档分割：在常规Markdown语法基础上，以---符号分割实现幻灯片分页，为尽可能满足文档规范及方便查看，建议在---符号前后均插入空行。
头部控制：在文档头部，以上下两个---符号包含一些指令，进行文档控制，其中包括marp和其他指令。
页面控制：在每页幻灯片的分割符之后内容之前，通过html注释形式进行控制，主要是各类局部指令。

---
marp: true <!-- 必须有，声明以marp渲染文档 -->
theme: gaia <!-- 控制主题 -->

---

<!-- 
class: cover 
header: "XXX" 
-->
# 第一页标题

指令

指令是Marp工具的扩展语法，可以控制幻灯片组主题、页码、页眉、页脚、样式等，可在文档头部使用YAML或在每页幻灯片内容前使用html 注释操作指令。

指令作用域

主要有全局指令和局部指令之分。全局指令是对整改幻灯片组的设置值；局部指令是对每页幻灯片的设置值，对已定义的页面和其后续页面有效（带_前缀的局部指令仅对其定义的页面有效）。

全局指令

theme: theme-name       <!-- 选用主题 -->
style: |                <!-- 调整主题样式 -->
  section {
    background-color: #ccc;
  }

headingDivider: 2       <!-- 定义实现分割的标题级别 -->

局部指令

<!-- paginate: true -->  <!-- 控制页码，选项有true、false、hold、skip -->

<!--
   header: 'XX'
   footer: 'XX'
-->     <!-- 定义页面的头尾内容p -->

<!-- _class: lead --> <!-- 仅定义本页使用lead类 -->

<!-- 
   _backgroundColor: black
   backgroundImage: "linear-gradient(to bottom, #67b8e3, #0288d1)"
   backgroundPosition: center
   backgroundRepeat: no-repeat
   backgroundSize: cover
   color: white
-->  <!-- 控制页面背景颜色和幻灯片颜色等 -->

特殊语法

常规语法和标准的Markdown语法是完全一致的，故只介绍Marp的特殊语法。

图片

进一步扩展了Markdown图片语法，通过[]内的关键词，赋予图片更多可能。插入的图片可以是本地文件或网络链接。

![width:200px height:30cm](image.jpg) <!-- 设置图片高和宽 -->
![w:32 h:32](image.jpg) <!-- 设置图片高和宽 -->
![brightness:.8 sepia:50%](image.jpg)<!-- 设置图片效果 -->
<!-- 设置图片效果的更多参数: https://marpit.marp.app/image-syntax?id=image-filters -->

![bg contain](https://example.com/background.jpg)<!-- 设置背景图片 -->
<!-- 相关参数：cover; contain; fit; auto; x%; w; h -->

![bg](https://fakeimg.pl/800x600/0288d1/fff/?text=A)
![bg](https://fakeimg.pl/800x600/02669d/fff/?text=B)
![bg](https://fakeimg.pl/800x600/67b8e3/fff/?text=C)<!-- 多个背景排列 -->

![bg vertical](https://fakeimg.pl/800x600/0288d1/fff/?text=A)
![bg](https://fakeimg.pl/800x600/02669d/fff/?text=B)
![bg](https://fakeimg.pl/800x600/67b8e3/fff/?text=C)<!-- 多个垂直背景排列 -->

![bg left](https://picsum.photos/720?image=29)<!-- 控制左右位置 -->

![bg left:33%](https://picsum.photos/720?image=27)<!-- 控制宽度 -->

列表

无序列表的标记符号：- + * ，三个均可。

有序列表的标记符号：数字后带.或)，两个均可。

怎么使用主题？

官方内置主题

可以使用三个官方主题，通过在文档最前面进行声明来选择主题。

---
marp: true 
theme：gaia <!-- 使用gaia官方主题，如不声明，默认使用default官方主题 -->
theme: cover <!-- 使用cover官方主题 -->

---

三个官方内置主题均提供4:3尺寸和反转特性（将配色反转），支持使用内联样式自定义颜色。

主题	特征	原配色的效果和配色反转的效果
default	GitHub markdown风格；字体大小适中；内容始终垂直居中；
gaia	字体较大，默认左上角对齐；`lead`类可使内容居中；
cover	字体超大，默认居中；

自定义主题

若使用自定义主题，需在扩展设置项 markdown.marp.themes注册主题，其中包括远程 URL 或当前工作区中本地文件的相对路径；或直接创建.vscode/settings.json，两个操作完全同步且一致。

使用import或import-theme引入官方主题，并在其基础上定义样式，语法为标准css语法。每一幻灯片页面均以section为容器，css文件中亦可以使用:root代表页面。可以用注释形式标明主题的元数据：主题名称（必不可少）、缩放、尺寸等。

/**
 * @theme foobar
 * @auto-scaling fittingHeader,math
 * @size 4:3 960px 720px
 * @size 16:9 1280px 720px
 * @size 4K 3840px 2160px
 */

@import 'base';

section {
  background-color: #f80;
  color: #fff;
}
/* 页码 */
section::after {
  font-weight: bold;
  text-shadow: 1px 1px 0 #fff;
}

使用方式与使用官方内置主题一样，在文档头部进行主题声明。

我自己也设计了一个主题（https://github.com/leegemstone/marp-themes.git），基于marp官方主题gaia，偏向于传统幻灯片，设计上较为扁平，主要特点有：

定义了header和footer样式，用于显示幻灯片大标题和页码
优化了标题、正文、引用块等的样式
支持自定义主题色
添加了cover p-col-right p-col-left等样式，使图文排版更方便美观

文档中调整样式

支持在文档中使用<style>html标签微调主题样式，有全局和局部两种。

<!-- 全局样式 -->
<style>
h1 {
  color: red;
}
</style>

---

<!-- 局部样式 -->
<style scoped>
h1 {
  color: blue;
}
</style>

---

更有特色的演示

支持导出ppt、pdf、jpeg、png和html格式，前面几种格式的演示自不必多说，更推荐使用html格式进行分享，可以尽可能利用Marp的丰富功能。特别是将网页文件在云端部署后，只需在浏览器中输入网址即可开始演示，十分方便有逼格，再也不用U盘拷贝和微信发送了。

云部署

以腾讯云为例，开通存储功能，创建存储桶，开通桶的静态网页功能，将网页文件及其依赖的图片等文件全部上传至存储桶（保持其相对路径不变），就可以通过网址进行浏览和演示啦！

‍—原创文章，未经允许，严禁转载—

专注内容：一个写PPT的利器 — Marp

目录

效果速览

PPT封面

PPT展示页面1

PPT展示页面2

Marp简介

工具介绍

Marp for VS Code的安装使用

Markdown是什么？

如何编写Markdown文件

基本语法

怎么编写Marp幻灯片

文档结构

指令

指令作用域

全局指令

局部指令

特殊语法

图片

列表

怎么使用主题？

官方内置主题

自定义主题

文档中调整样式

更有特色的演示

云部署