乐趣区

关于markdown:Marp用-Markdown-写-PPT-成为可能

jiezi

对于大多数人来说制作 PPT 体验并不是很好，其中最烦人的莫过于排版款式。而 Markdown 用简洁的语法代替排版，而不需像咱们用的字处理软件 Word 或 Pages 有大量的排版、字体设置。Markdown 让你只须要专一内容而不必关怀排版款式，Markdown 帮你解决排版款式。Markdown 次要用于代替 Word，是否能够将简洁易用的 Markdown 用于制作 PPT 呢？
​

上面我将介绍仅须要简略的 Markdown 文档就能够生成幻灯片的工具：Marp。

装置

对于普通用户而言，现阶段应用 Marp 的最好形式就是通过其公布的 VS Code 插件，能够创立并导出为 PPTX、PDF 和 HTML 的演示文稿。
​

咱们能够先返回 VSCode 的网站 下载并装置 VSCode。一旦进入 VSCode，点击 Extensions 选项卡并搜寻 Marp：

按下装置按钮，几秒钟后你就能够装置了。装置实现后在电脑的任何中央创立一个文件夹（这里我取名 marp_slideshow），而后在 VSCode 中关上它并在外面创立了一个 slideshow.md 文件。

应用 Markdown 制作最简略的幻灯片，只须要让编辑器晓得：它是幻灯片（不是文档）以及它该在哪里分页。
​

通过在文档的结尾增加如下字段通知编辑器你正在应用 Marp

---
marp: true
---

​

通过应用分割线语法 — 来创立一个新的幻灯片（须要增加一个空行）


---

根本应用

创立第一张幻灯片

通知编辑器正在应用 marp

---
marp: true
---

​

关上预览

当初能够点击 Preview 图标查看演示文稿

增加内容

增加如下内容，第二个元素有子元素，每个元素都有不同的款式。以下是如何应用粗体、斜体和行内代码的示例：

# Welcome to MARP
- It's an awesome VSCode extension for making presentations.
- It's based on Markdown:
  - **Bold**
  - _Italic_
  - `code`

创立第二张幻灯片

应用分割线语法 — 创立一个新的幻灯片 


---

增加图片

增加如下内容，将题目、要点和图片增加到幻灯片中：

# Welcome to Slide 2
- This is a neural network:

![A neural network](https://upload.wikimedia.org/wikipedia/commons/3/3d/Neural_network.svg)

导出演示文稿

能够将演示文稿保留为 PowerPoint 文档、PDF 文件或 HTML。PNG 和 JPG 选项只会导出第一张幻灯片。通过编辑器右上角的 Marp 图标按钮就能够调出 Export Slide Deck 命令并导出幻灯片。


​

当初让咱们关上 PDF 来验证导出是否胜利：

​

让咱们再查看下 PPTX（不能批改文本或图片）：

​

最初为了不便演示咱们能够导出 HTML，也能够应用 GitHub 托管动态 HTML 进行分享：

​

进阶应用

设置款式

能够通过两种形式实现，一是通过在文件头部的 YAML 命令区输出命令键值对。

---
marp: true
size: 4:3
theme: default
---

​

另一种形式是通过相似 HTML 备注的款式 <!– directive: value –> 实现，该命令默认对以后与其后所有的幻灯片失效。

<!-- size: 4:3 -->

​

能够在命令前加一个 $ 使其针对整个文档无效，或在后面加一个下划线 _ 使其仅对以后一张幻灯片失效。

<!-- $backgroundColor: orange -->

<!--_backgroundColor: orange -->

主题设置

更改演示文稿的主题：

---
marp: true
theme: gaia
---

长宽比设置

更改演示文稿的长宽比为 4 : 3：

---
marp: true
size: 4:3
---

题目自适应

Marp 还保留了一个 <!– fit –> 命令用于题目的自适应，将它放在 Markdown 题目的 # 后能够使得题目主动填充幻灯片的大小，比拟适宜于首页大题目等场景。

# <!-- fit --> Welcome to MARP

其余款式

Marp 反对的命令还算丰盛，包含主题 theme、长宽比 size、是否显示页码 paginate、页眉 header、页脚 footer、背景设置 backgroundColor、backgroundImage 和文字色彩 color 等等。更多命令在 官网阐明页 上有具体的解释。

自定义款式

对于更简单的款式能够应用 CSS 样式表自定义：

<style>
</style>

​

应用光明的主题：

<style>
    :root {
        --color-background: #101010 !important;
    --color-foreground: #FFFFFF !important;
    }
</style>

图片设置

Marp 应用了在原生的 Markdown 图片语法的根底上进行了拓展，能够间接在 Markdown 语法中管制图片的表现形式，个别模式为 ![keyword: value]()。

更改长宽

对于背景图片，更改图片长或宽能够应用关键词 width、height 或简称为 w 和 h。

![width:200px](image.png)
![w:200px, h:400px](image.png)

图片滤镜（Image Filter）

基于 CSS 的 filter 属性，Marp 能够对图片进行一些基于含糊、亮度、对比度等的操作。

![blur:15px](image.png)
![brightness:0.5](image.png)
![contract:150%](image.png)

背景图片

Marp 提供了简略的形式将某张图片设为背景，在方括号中写入 bg 即可。

![bg](background.png)

​

同时通过在 bg 后追加图片的格局属性，如 [bg fit]，能够具体设置背景图片的缩放形式。其中 cover 示意充斥页面，fit 示意拉伸以适应页面，auto 为不做缩放应用原图片比例。

显示设置

无序列表语法 * 被保留为放映幻灯片时会按元素顺次显示列表内容。

  * **Bold**
  * _Italic_
  * `code`

​

无序列表语法 – 与 + 可同时显示所有内容。

  * **Bold**
  * _Italic_
  * `code`

​

相似的，有序列表语法 1) 被保留为顺次显示列表元素。

  1) **Bold**
  2) _Italic_
  3) `code`

​

有序列表语法 1. 为同时显示所有元素。

  1. **Bold**
  2. _Italic_
  3. `code`

论断

如果演示文稿不须要动画和过渡，能够将其保留为 PDF 文档，因为 PDF 更容易分享和关上。当然也能够导出 HTML 不便演示，同时应用 GitHub 托管动态 HTML 进行分享。
​

如果你须要 Powerpoint 所提供的所有性能，那么对你来说 Marp 可能太根底了，Marp 提供的动画和过渡绝对简略。
​

参考
Marp：用 Markdown「写」PPT 的新抉择
Bye-bye PowerPoint. Hello Marp!

退出移动版