marp: true
theme: gaia
class: invert
paginate: true
_paginate: false
header: "Marpit教程"
footer: "SC SC"

Marpit教程

wintryheart

本PPT使用VS code的Marpit插件制作。
主要参考Marpit官网

主要内容

• 最简单的Marpit Markdown
• 指令Directives
  • 全局指令：theme
  • 局部指令：paginate, class, header, footer, background
• 背景色和图片设置
• 其它：Emoji, math, list

最简单的Marpit Mardown

---
marp: true
---
# 第一张幻灯片 

没什么好玩的内容。

---
# 第二张幻灯片

还是没有啥好玩的。

指令Directives

• HTML命令

<!--
theme: default
paginate: true
-->

• 前置YAML：必须放在Markdown的头部。

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

指令

• 全局指令
  • 全局指令设置整个幻灯片，如主题。
  • 如果同一全局指令多次设置，则Marpit只认最后一个值。
• 局部指令
  • 局部指令设置每个幻灯片页。适用于定义页以及之后所有页面。
• 本页指令
  • 只适用于当前定义页。只需在局部指令名加前缀“_”。

• 局部指令示例：

<!-- backgroundColor: aqua -->
本页背景色为aqua。
---
第二页背景色仍为aqua。

• 本页指令示例：

<!-- _backgroundColor: aqua -->
本页背景色为aqua
---
第二页背景色不再是aqua，恢复原有设定。

bg right 80%

全局指令

Theme指令：Marp内置主题

• 共同特征
• Default主题
• Gaia主题
• Uncover主题

共同特征

• 预置尺寸：4:3 (像素960x720)

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

• invert类：反转主题颜色

<!-- class: invert -->

主题差异

1. Default主题: 幻灯片内容总是垂直居中。

<!-- theme: default -->

2. Gaia主题: 幻灯片内容默认左上角对齐。

<!-- theme: gaia -->

3. Uncover主题：幻灯片内容总是水平和垂直居中。

<!-- theme: uncover -->

Gaia主题：lead类

使用lead class可以转换成uncover主题的居中模式。

<!-- 
theme: gaia
class: lead
-->

也可只改单页显示。一般用于幻灯片首页。

<!-- _class: lead -->

Gaia主题：gaia类

Gaia主题包含一个额外的配色方案：gaia class

<!-- _class: gaia -->

背景为天蓝色，字体为白色。

Gaia主题：同时使用多个类

• 在YAML标记中使用列表式。

---
theme: gaia
class:
  - lead
  - invert
---

• 在HTML标记中使用空格间隔

<!-- class: lead gaia -->

Style指令 （没事不要瞎调）

• 通常可以通过<style>元素调整主题，但是换一个Markdown编辑器，可文档式样会被破坏。
• 可以使用style global指令而不是<style>。

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

Heading divider指令 （貌似没什么用）

• 通常，幻灯片页面切割使用“---”。用“#”数表示标题级别1-6。
• 也可通过headingDivider指定标题级别作为页面分割的标准。
  • 如果大于或等于该级别则页面自动切割。

<!-- headingDivider: 2 -->
# 1st page
The content of 1st page
## 2nd page
### The content of 2nd page
Hello, world!
# 3rd page

局部指令

Paginate

• 显示页码

<!-- paginate: true -->

• 首页不显示页码

---
paginate: true
_paginate: false
---

或者在第二页设置``，页码则第二页开始显示。

Header and footer

• 一般在YAML里设置，可以使用markdown标记和插入图片。
• 注意：用单引号或双引号括起来。不能使用![bg]()语法。

---
header: '**这是页眉**'
footer: '_这是页脚_'
---

---
footer: '![](http://www.suda.edu.cn/images/2.jpg)'
header: '![](http://www.suda.edu.cn/images/3.jpg)'
---

Class

• 本页标题居中

<!-- _class: lead -->

• 相当于修改主题CSS的<section>元素

section.lead h1 {
  text-align: center;
}

Backgrounds

• 背景渐变色

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

Backgrounds

• 黑底白字

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

Backgrounds

1. backgroundPosition 默认为center。
2. backgroundRepeat 默认为no-repeat。
3. backgroundSize 默认为cover。
4. backgroundImage语法为![bg]()。扩展Image语法参见高级部分。

bg right

图片和背景设置

• 图片尺寸Resizing image
• 图片滤镜Image filters
• 背景尺寸Background size
• 多背景Multiple backgrounds
• 分割背景Split backgrounds
• 色彩设置Shorthand for setting colors

Resizing image

• 使用width和height选项。

![width:200px](image.jpg) <!-- Setting width to 200px -->
![height:30cm](image.jpg) <!-- Setting height to 300px -->
![width:200px height:30cm](image.jpg) <!-- Setting both lengths -->

• 使用缩写

![w:32 h:32](image.jpg) <!-- Setting size to 32x32 px -->

Image filters

Image filters

可以同时使用多个滤镜。

![brightness:.8 sepia:50%](https://example.com/image.jpg)

Background

与markdown插入图片的语法一样，只是包括关键词bg

![bg](https://example.com/background.jpg)

Background size

![bg contain](https://example.com/background.jpg)

Multiple backgrounds

• 水平排列

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

Split backgrounds

关键词bg配合关键词left或right，指定图片占一半版面，幻灯片内容占另一半版面。

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

还支持调整尺寸。

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

Shorthand for setting colors

# Hex color (White BG + Black text) 白底黑字
![bg](#fff)
![](#000)
---
# Named color (rebeccapurple BG + White text) 紫底白字
![bg](rebeccapurple)
![](white)
---
# RGB values (Orange BG + White text) 橘底白字
![bg](rgb(255,128,0))
![](rgb(255,255,255))

• Hex色码不好记，QQ和微信的截图可以取RGB值，推荐后者。

Emoji

Emoji的markdown代码参考：Emoji Cheat Sheet
注意：简书不支持这种Emoji名称简易代码。

数学公式

使用$math$进行行内嵌入，如： .
使用$$math$$，则数学公式单独成行。如：

列表

有序	Markdown	替代标记		无序	Markdown	替代标记
1. One	1. One	1) One		One	- One	* One
2. Two	2. Two	2) Two		Two	- Two	* Two
3. Three	3. Three	3) Three		Three	- Three	* Three