Marp：把你的Markdown文稿变成PPT

Marp：把你的Markdown文稿变成PPT

作为深度Markdown使用者，平时用Markdown写作各种内容是很方便的；此外，在写Notebook时也多使用Markdown记录内容与公式。然而，有时需要展示自己想法或做汇报，PPT 在这个时候则很重要。

但 PPT 的制作流程就不像观看 PPT 那么容易了，即便是简单的课堂讨论或是轻松的内部交流，一份内容不多的 PPT 做起来也得费上一番工夫。那有没有一种快速、简洁的方法迅速完成一份 PPT 呢？

简洁易用的 Markdown 自然会成为很有吸引力的选择。Marp工具是一种很好的解决方案：

安装方式

打开VsCode 的扩展主题 搜索 Marp即可进行安装。

image-20230709191356752

注意一定要卸载或禁用Markdown Preview Enhanced，否则不能预览

image-20230709191431455

只需要点击放大镜，就能对内容实现预览：

image-20230709191542970

Marp使用也非常简单，其利用markdown的分隔符对PPT进行分页。只需要三个：---

常见语法

接下来介绍一下常用的语法。

背景颜色

可以在 markdown 头部添加元信息。

---
theme: default
paginate: true
---

一个指令默认具有全局的作用域，如果在指令开头添加 _ 下划线将具有本地作用域，只会到当页幻灯片设置生效

<!-- backgroundColor: aqua -->

本页幻灯片具有 aqua 背景颜色

---

这是第二页， 具有相同 aqua 背景颜色

---

<!-- _backgroundColor: red -->

这页是红色背景

---

这页是 squa 背景色

效果如图：

图片语法

首先需要设置图床。

更改图片的大小：

![width:200px](image.jpg) <!-- 设置宽度为 200px -->
![height:30cm](image.jpg) <!-- 设置高度为 300px -->
![width:200px height:30cm](image.jpg) <!-- 设置宽高 -->
![w:32 h:32](image.jpg) <!-- 支持缩写，设置大小为 32x32 px -->

效果如图：

image-20230714210646381

image-20230714210715664

多张背景

默认 horizontal 布局

![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)

img

• 使用 vertical 布局

![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)

img

背景文字分离

![bg left](https://picsum.photos/720?image=29)

# Split backgrounds

这段幻灯片内容在背景图右边。

多张背景图片和文字分离

![bg right](https://picsum.photos/720?image=3)
![bg](https://picsum.photos/720?image=20)

# Split + Multiple BGs

The space of a slide content will shrink to the left side.

img

背景文字分离指定大小

![bg left:33%](https://picsum.photos/720?image=27)

# Split backgrounds with specified size

img

自定义幻灯片主题

如果你熟悉一些基础的HTML语法就可以自定义自己的主题了。

刚才提到全局命令和局部命令的差别，局部命令需要标识下划线。Marp的全局命令是指写在首页，作用于全部Slide的命令，局部命令是指作用于本页的指令，例如：

papaginate: true    //表示Slide标页码
_papaginate: false  //表示本页Slide不标页码

官网介绍的全局命令和局部命令

全局指令有以下三个：

• theme

主题设置， 默认主题是 theme: default , 可自定义主题。

• style

样式定制，如：

---
theme: base-theme
style: |
  section {
    
    
    background-color: #ccc;
  }
---

• headingDivider

自动分页功能，指定标题级别进行自动分页

局部命令就有很多：

指令名	说明
paginate	如果设置为true，自动显示分页号
_paginate	如果设置为false, 首页分页号不显示
header	设置页头信息
footer	设置脚部（底部）信息
class	设置样式名
backgroundColor	设置背景色
backgroundImage	设置背景图
backgroundPosition	设置背景图位置
backgroundRepeat	设置背景重复样式
backgroundSize	设置背景大小
color	设置字体颜色

示例：

<!-- backgroundImage: "linear-gradient(to bottom, #67b8e3, #0288d1)" -->

Gradient background

---

<!--
_backgroundColor: black
_color: white
-->

Black background + White text

基于此有大佬开发了国科大ppt主题，如图所示：

项目地址：https://github.com/BeWaterMyFriend7/Marp-Theme-UCAS

参考

1. 用Markdown写PPT ，Marp的果壳主题，https://zhuanlan.zhihu.com/p/447797515
2. Marp的中文参考文档，https://caizhiyuan.gitee.io/categories/skills/20200730-marp.html
3. Marp官网：https://marp.app/

本文由 mdnice 多平台发布