Marpit

MarkDown是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。适合熟悉Tex文法的同学使用，可以参考菜鸟教程。本人习惯使用Typora实时渲染.md文件。

下载VScode，自动支持markdown渲染，也可以再安装一个Markdown All in One扩展。为了渲染出PPT，再安装Marpit的扩展：Marp for VS Code。

打开一个.md文件，可以在右上角发现如下两个按键：

1. 打开侧边预览：可以预览.md文件的渲染效果。
2. Show Quick Pick Of Marp Commands：导出为.pdf、.html的指令。

代码

---
marp: true

paginate: true

theme: default

style: |

  section {
    background-color: #eee;
    color: #111;
    width: 1280px;
    height: 720px;
    font-size: 32px;
    padding: 80px;
  }

  h1 {
    text-align: center;
    font-size: 60px;
    color: #000;
  }

  h2 {
    text-align: center;
    font-size: 50px;
    color: #111;
  }

  p {
    text-align: left;
    font-size: 32px;
    color: #111;
  }

  header,
  footer {
    font-size: 32px;
    position: absolute;
    left: 50px;
    right: 50px;
    height: 20px;
  }

  header {
    top: 10px;
  }

  footer {
    bottom: 40px;
  }

  section.封皮 h1 {
    text-align: center;
    background-color: #09c;
    font-size: 60px;
    color: #fff;
  }

  section.封皮 h2 {
    text-align: center;
    background-color: #09c;
    font-size: 50px;
    color: #eee;
  }

  section.封皮 p {
    text-align: center;
    font-size: 40px;
    color: #000;
  }

  section.正文 h1 {
    text-align: center;
    font-size: 60px;
    color: #000;
  }

  section.正文 h2 {
    text-align: center;
    font-size: 50px;
    color: #111;
  }

  section.正文 p {
    text-align: left;
    font-size: 32px;
    color: #111;
  }


header: 'Header content'
footer: 'Footer content'



math: katex
---

<!-- _header: '' -->
<!-- _footer: '' -->
<!-- _paginate: false -->
<!-- _class: 封皮 -->

# 标题

## 标题2

标题3


---
<!-- class: 正文 -->

# 大标题

* One
* Two
* Three

## 小标题

这是正文段落。内嵌公式：$a^2+y=\alpha$

下边是独立公式：
$$
    \{1,2,3\}
$$


---

# 可以P图


这是背景图片：![bg w:900 h:600 blur:10px brightness:1.2](https://fakeimg.pl/800x600/0288d1/fff/?text=123)


这是内嵌图片：![w:200 h:150 brightness:1.1](https://fakeimg.pl/800x600/0288d1/fff/?text=ABC) 同一行的另一张内嵌图片： ![w:200 h:150 brightness:1.1 invert:100%](https://fakeimg.pl/800x600/0288d1/fff/?text=DEF)


---
<!-- _backgroundColor: #fff -->
# 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))


---

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



---

![bg right:66%](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.

效果