| marp | size |
|---|---|
true |
58140 |
郭垒
参考：知乎链接
- vscode
- 插件：markdwon all in one
- 插件：marp for vscode
-
创建
.md文件 -
激活marp
在最上层输入YAML语法：
---
marp: true
---即可激活marp的功能
---
-
插入
---进行分页 -
---上一行需要空出来
添加在最前面的YAML代码中
---
theme: default
paginate: true
---此处的指令会在全局生效
在每个silde的指令前加$的方式已经被弃用，可以在YAML代码中定义
-
使用
<!-- _directive: value -->指定局部指令（指令前加下划线_），位置要放在该页slide分隔符后面，只对当前幻灯片生效 -
使用
<!-- directive: value -->，命令对当前页和之后的页生效
| 命令 | 作用 |
|---|---|
theme |
指定幻灯片的主题。 |
style |
指定 CSS 来调整主题。 |
headingDivider |
指定标题分隔符选项。 |
theme指定主题，可选的有 default, gaia, uncover
headingDivider指定是否用一级标题作为幻灯片分割，默认是false 在从原生Markdown文件生成PPT时比较有用
style 调整主题
---
theme: base-theme
style: |
section {
background-color: #ccc;
}
---| 命令 | 作用 |
|---|---|
paginate |
如果设置了true，则在幻灯片上显示页码。 |
header |
指定幻灯片标题的内容。 |
footer |
指定幻灯片页脚的内容。 |
class |
<section>指定幻灯片元素的 HTML 类。 |
backgroundColor |
幻灯片的设置background-color样式。 |
backgroundImage |
幻灯片的设置background-image样式。 |
backgroundPosition |
幻灯片的设置background-position样式。 |
backgroundRepeat |
幻灯片的设置background-repeat样式。 |
backgroundSize |
幻灯片的设置background-size样式。 |
color |
幻灯片的设置color样式。 |
本地指令可以在YAML进行全局设置，也可以在slide命令里进行本地设置
header 和 footer可以指定页眉页脚，也可以使用Markdwon语法对文字格式化，也可以使用Marp图片语法插入图片
---
header: '**bold** _italic_'
footer: ''
---
NOTE: Wrap by (double-)quotes to avoid parsed as invalid YAML.用backgroundColor或backgroundImage定义幻灯片的背景图片或颜色，也可以用渐进色
color定义文本颜色
<!-- backgroundImage: "linear-gradient(to bottom, #67b8e3, #0288d1)" -->
Gradient background
---
<!--
_backgroundColor: black
_color: white
-->
Black background + White textMarpit 扩展了 Markdown 图像语法以帮助创建漂亮的幻灯片。
用weight和height指定图像的长宽
 <!-- Setting width to 200px -->
 <!-- Setting height to 300px -->
 <!-- Setting both lengths -->用 w和h简写
 <!-- Setting size to 32x32 px -->| Markdown | w/ arguments |
|---|---|
![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]() |
![invert]() |
![invert:100%]() |
![opacity]() |
![opacity:.5]() |
![saturate]() |
![saturate:2.0]() |
![sepia]() |
![sepia:1.0]() |
指定多重滤镜
语法为 ，kdyword设置背景的嵌入方式
| Keyword | Description | Example |
|---|---|---|
| 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. |  |
横向排列
纵向排列
通过 Markdown 图像语法，Marpit 允许定义颜色值而不是图像 URL。
颜色名设置
使用RGB定义颜色
)
)
- One
- Two
- Three
- One
- Two
- Three
* One
* Two
* Three
- One
- Two
- Three
1. One
2. Two
3. Three
- One
- Two
- Three
1) One
2) Two
3) Three
- One
- Two
- Three
全局style: 放在任意页都可以
<style>
section {
background: #aaa;
color: white;
font-size: 0.6cm;
}
h1 {
color: white;
font-size: 2cm;
}
h2 {
color: yellow
}
h3 {
color: green
}
h4 {
color: blue
}
h5 {
color: red
}
</style>局部style
<style scoped>
section {
background: black;
}
h1 {
color: lightskyblue;
font-size: 2cm;
}
h3 {
color: white
}
</style>定义全局局部引用
<style>
section.bg {
background: black;
}
section.bg h1 {
color: red;
font-size: 2cm;
text-align: center;
}
section.bg h3 {
color: white
}
</style>
- 引用:`<!-- _class: bg -->`在class中设置bg即可使用 section.bg的style