—原创文章，未经允许，严禁转载—
于我而言，和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(纯白色)。插入了一张背景图片。#后是想展示的文字。<br/>是换行的意思，控制每行内容的间距。键入内容的过程中，无需考虑格式上的小细节，最终渲染的效果是令人满意的（在排版和格式上并没花费什么心思）。
---
<!--
_class: cover
_paginate: skip
_color: #fff
-->
<br/><br/><br/><br/><br/>
# 演示主题
<br/><br/><br/>
## 单位
## 汇报人
## 202X年XX月XX日
PPT展示页面1
键入以下内容，将自动渲染出相应页面。<!-- -->符号内的指令分别代表：页面最上面内容为“标题”、页面最下面无内容。其他也是Markdown的基础语法，用简单的几个符号即赋予文本丰富的格式，在传统的PPT工具中实现这些效果并不是如此简捷的，不需要频繁地选中内容、设置格式、拖动位置、创建背景图块等等。
---
<!--
header: '*标题*'
footer: ' '
-->
# 这是一级标题，字号最大， **可以将其加粗，用醒目的主题色显示，** *或者以斜体来显示更丰富的效果，* `用反引号括住内容将以行内代码的形式显示，这非常实用！` ， 当然这些效果可以叠加使用，比如***加粗斜体*** 、*`斜体行内代码`*。
## 这是二级标题，字号适中，**可以将其加粗，用醒目的主题色显示，** *或者以斜体来显示更丰富的效果，* `用反引号括住内容将以行内代码的形式显示，这非常实用！` ， 当然这些效果可以叠加使用，比如***加粗斜体*** 、*`斜体行内代码`*。
### 这是三级标题，字号较小，**可以将其加粗，用醒目的主题色显示，** *或者以斜体来显示更丰富的效果，* `用反引号括住内容将以行内代码的形式显示，可以突出显示一些重点内容！` ， 当然这些效果可以叠加使用，比如***加粗斜体*** 、*`斜体行内代码`*。
四级、五级标题未设置显示样式，默认不显示，请不用使用。六级标题在此主题中可用于插入空行，控制前后文间距，或者使用`<br/>`标签换行，更推荐使用后者。
PPT展示页面2
键入以下内容，将自动渲染出相应页面。在传统的PPT工具中实现这些效果更加不易。
---
<!--
header: '*引用块、默认插图*'
footer: ' '
-->
> 这是一个引用块，将突出显示块中的内容。
> 它是一个容器，可以放入很多内容：
> - 各级标题
> - 正文
> - 列表
> - 图片
以下是插图示例，多张图片请在一行内插入，可用任意字符调整图片位置及间距（已预设字符无颜色），推荐使用`=`。
====================
以上这些展示中，除了运用几个有限的符号，用户需要关注的基本上完全是内容本身。更多的效果展示可以看我设计的主题。如果你对这个工具感兴趣，可以仔细学习下面的内容。
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 | mdtohtml的转换框架，最为精简和基础 | 基于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，点击界面右上角的预览和导出按钮即可实现对应操作。
---
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. 列表项12. 列表项23. 列表项3 |
| 无序列表（Unordered List） | - 列表项1 - 列表项2 - 列表项3 |
| 代码（Code） | 代码 |
| 分隔线（Horizontal Rule） | --- |
| 链接（Link） | [文本](https://www.example.com) |
| 图片（Image） |  |
怎么编写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图片语法，通过[]内的关键词，赋予图片更多可能。插入的图片可以是本地文件或网络链接。
 <!-- 设置图片高和宽 -->
 <!-- 设置图片高和宽 -->
<!-- 设置图片效果 -->
<!-- 设置图片效果的更多参数: https://marpit.marp.app/image-syntax?id=image-filters --><!-- 设置背景图片 -->
<!-- 相关参数：cover; contain; fit; auto; x%; w; h -->
<!-- 多个背景排列 -->
<!-- 多个垂直背景排列 -->
<!-- 控制左右位置 -->
<!-- 控制宽度 -->列表
无序列表的标记符号：- + * ，三个均可。
有序列表的标记符号：数字后带.或)，两个均可。
怎么使用主题？
官方内置主题
可以使用三个官方主题，通过在文档最前面进行声明来选择主题。
---
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样式，用于显示幻灯片大标题和页码 - 优化了标题、正文、引用块等的样式
- 支持自定义主题色
- 添加了
coverp-col-rightp-col-left等样式，使图文排版更方便美观
文档中调整样式
支持在文档中使用<style>html标签微调主题样式，有全局和局部两种。
<!-- 全局样式 -->
<style>
h1 {
color: red;
}
</style>
---
<!-- 局部样式 -->
<style scoped>
h1 {
color: blue;
}
</style>
---更有特色的演示
支持导出ppt、pdf、jpeg、png和html格式，前面几种格式的演示自不必多说，更推荐使用html格式进行分享，可以尽可能利用Marp的丰富功能。特别是将网页文件在云端部署后，只需在浏览器中输入网址即可开始演示，十分方便有逼格，再也不用U盘拷贝和微信发送了。
云部署
以腾讯云为例，开通存储功能，创建存储桶，开通桶的静态网页功能，将网页文件及其依赖的图片等文件全部上传至存储桶（保持其相对路径不变），就可以通过网址进行浏览和演示啦！
—原创文章，未经允许，严禁转载—
