本文旨在记录一些marp做slides的常用语法

参考： Marpit Markdown

开启marp⁍

1
2
3
---
marp: true
---

常见指令⁍

分割slides⁍

用---/___/***/- - -分割

设置样式的几种方法⁍

  • 用HTML注释实现：当前页及其之后的所有页都会变成该样式 <!-- backgroundColor: aqua -->
    • 加上_就会只应用于本幻灯片 <!-- _backgroundColor: aqua -->
  • YAML frontmatter：应用所有

全局指令⁍

Name Description
theme Specify theme of the slide deck.
style Specify CSS for tweaking theme.
headingDivider Specify heading divider option.
  • 用<!-- headingDivider: 3 -->可以设置分页的最低标题级数，不用分割线分割（例如设置为3，则遇到1/2/3级标题就会自动分页）

local指令⁍

Name Description
paginate 显示页码 if you set true.
header 指定页眉（用单引号，可以插图片）
footer 指定页脚（用单引号，可以插图片）
class Specify HTML class of slide’s <section> element.
backgroundColor Setting background-color style of slide.
backgroundImage Setting background-image style of slide.（可以直接用css语法设置渐变色）
backgroundPosition Setting background-position style of slide.（默认center）
backgroundRepeat Setting background-repeat style of slide.（默认no-repeat）
backgroundSize Setting background-size style of slide.（默认cover）
color Setting color style of slide.

主题设置⁍

内置主题见：marp-core/themes at main · marp-team/marp-core (github.com)

可以通过如下语法对细节进行调整

1
2
3
4
5
6
7
8
9
10
11
12
---
# class: invert
theme: uncover
style: |
  section {
    text-align: left;
    font-size: 30px;
  }
    ul, ol {
      margin: 0;
  }
---

图片语法⁍

图片的通用语法是![options](imgsrc)

Image syntax (marp.app)

调整宽高⁍

![width:200px height:30cm](image.jpg) 空格分隔！

设置背景⁍

options: bg

其他可选：

  • vertical 垂直
  • cover(default)/contain/fit/auto/x%：调整尺寸（可以用调宽高的方法）
  • left/right/left:33%

设置颜色⁍

![bg](#fff)