---

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	指定幻灯片的主题
style	定义CSS，微调主题
headingDivider	指定标题分隔符选项

---

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	true, 显示页码	backgroundColor	设置背景色
header	指定页眉	backgroundImage	设置背景图片
footer	指定页脚	backgroundPosition	设置背景图片位置
class	指定<section>元素的HTML类	backgroundRepeat	设置背景图片重复方式
color	设置字体颜色

---

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

Markdown语法	参数示例
![blur]()	![blur:10px]()
![brightness]()	![brightness:1.5]()
![contrast]()	![contrast:200%]()
![drop-shadow]()	![drop-shadow:0,5px,10px,rgba(0,0,0,.4)]()
![grayscale]()	![grayscale:1]()
![hue-rotate]()	![hue-rotate:180deg]()

---

Image filters

Markdown语法	参数示例
![invert]()	![invert:100%]()
![opacity]()	![opacity:.5]()
![saturate]()	![saturate:2.0]()
![sepia]()	![sepia:1.0]()

可以同时使用多个滤镜。

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

---

关键词	描述	示例
cover	Scale image to fill the slide. (Default)	
contain	Scale image to fit the slide.	
fit	Alias to contain, compatible with Deckset.	
auto	Not scale image, and use the original size.	
x%	Specify the scaling factor by percentage value.	

---

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

code	emoji		code	emoji		code	emoji
:+1:	👍		:-1:	👎		:smile:	🙂
:heart:	❤		:cry:	😭		:sob:	🥺
:a:	🅰		:b:	🅱		:angry:	😠
:grin:	😀		:tongue:	😛		:cn:	🇨🇳

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