考虑自己制作一个hust背景的ppt

Marp自定义主题

Marp介绍

什么是Marp？

Marpit是用于从Markdown创建幻灯片的瘦框架。它可以将Markdown和CSS主题转换为由静态HTML和CSS组成的幻灯片，并通过打印创建可转换为幻灯片PDF的网页。

Marp的简单操作

分页操作
使用“—”进行分页。
1
2
3
4
5
6
7
# page1

---

# page2

---
不同指令的作用域
- 有些参数可以指定在某页才生效：backgroundColor，paginate，header，footer，class等等，设置为本地作用域的办法是在指令开头添加_即可。
- 有些参数被设置为了全局作用域：theme，style，headingDivider等等。

图片语法（这个比较实用）

常见的markdown图片引用格式：
1
![设置的参数](image.png)
在设置的参数这一栏里面可以对图片进行一定的处理。
设置背景，可以同时添加多张图片作为背景，默认是横向排列的
背景和文字分离：可以通过在设置参数栏中设置靠左或是靠右如：
1
2
3
4
5
![bg left](image.png)

//else
![bg right:40%](image1.png)
![bg](image2.png)
上述的第二个例子会把两张图片作为背景放在ppt的右侧的40%部分，文字部分放在左侧。

可以设置背景和字体的颜色：

# 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)>)

如何创建自己的主题css文件

首先需要把css模板导入到vscode的配置文件中

//放到.vscode/settings.json文件中
{
"markdown.marp.themes": [
    "https://example.com/foo/bar/custom-theme.css",
    "./themes/hust.css"
]
}

接下来编写自己的css文件，在文件夹中创建一个themes文件夹，创建一个hust.css文件并进行编辑，注意需要在文件头声明这是一个marpit文件，随后CSS文件中需要利用@import导入已有的主题文件，目前Marp官方有default，gaia，uncover三款主题：

/* @theme hust */

@charset "UTF-8";
@import 'gaia';

section {
width: 1280px;
height: 960px;
font-size: 40px;
padding: 40px;
}

h1 {
font-size: 60px;
color: #09c;
}

h2 {
font-size: 50px;
}

上面的css文件的解释：每一行文字都被放在了一个h${number}的容器中，可以在css文件中设置这些文字的大小颜色等等。

此外，还可以设置页脚等等，建议查阅官方文档了解marpit提供的api并进行调用。

一个section定义了全局的设置参数，可以在section设置新的页面设置，在每个页前声明使用哪一种class来对应格式：

@import 'default';

section {
    font-family: "Arial", "Hiragino Maru Gothic ProN";
    font-size: 32px;
    padding: 40px;
}

section.title h1 {
    color: white;
    font-family: "Arial", "Hiragino Kaku Gothic ProN";
    font-size: 60px;
    text-align: center;
}

section.title {
    color: white;
    font-family: "Arial", "Hiragino Maru Gothic ProN";
    font-size: 36px;
    text-align: center;
    padding: 40px;
}

section.slides h1 {
    background: linear-gradient( to left,  rgba(69,179,224,1) 25%, rgb(97, 109, 218) 75% );
    -webkit-background-clip: text;
    color: transparent;
    font-family: "Arial", "Hiragino Kaku Gothic ProN";
    font-size: 42px;
    position: absolute;
    left: 50px; top: 50px;
}

section.slides h2 {
    font-size: 32px;
    color: #4ac;
    position: absolute;
    left: 50px; top: 90px;
}

只需要在每一张ppt的前面添加：

1
2
3

<!--
class: title
-->

就可以自由选择该页的模板。

额外的工具

单纯的使用markdown+marp并不能很好的满足我们的学术要求，如何把实验数据转换成常见的图表插入到我们的ppt中也成为一个挑战。下面介绍了几个外部工具生成图表。

kroki.io：这是一个开源的渲染引擎，通过对常见的文字符号进行解析生成矢量图。
draw.io：相比于常见的visio等矢量作图软件，drawio是一款轻量级的开源矢量作图软件，支持多种格式导出。
vega.io：是一款很好的数据可视化软件，能够快速做出丰富的数据展示图。

开源仓库

我的开源仓库地址，欢迎大家使用!

参考

marp+vscodes使用

想学打球的菜鸡

marp自定义主题