文章目录
- 初步认识
- 指令设置
- 图像设置
- 布局设置
初步认识
marp是支持Markdown格式的PPT神器,有了这个就可以敲代码写PPT了。更绝的是,marp提供了VScode插件,故而可以愉快地在VScode中写PPT了。
在VScode扩展商店中搜索marp,安装Marp for VS Code
,安装完成后,在.md
格式文件的选项卡栏上,会多出一个双直角三角形,这个便是marp的专属按钮,下文称此按钮为marp按钮。
接下来,新建一个md文件,姑且命名为ppt.md,点击marp,选择Toggle Marp Feature...
,然后ppt.md首行便出现了marp标记
---
marp: true
headingDivider: 1
---
同时右侧预览窗口会出现PPT白板,接下来添加一点内容,得到下图
可见,marp建立在.md
格式的语法之上,但有以下几点需要注意
---
可分割PPT页面;如果开启全局指令headingDivider
,则可直接根据markdown的一级标题来分割页面- 通过
<!---->
进行指令设置 - 插入图像仍旧沿用markdown格式
![]()
,但在方括号中可进行更多设置
指令设置
设置指令有两种方法,一种是通过<!---->
,进行单个页面的指令设置,另一种如下,直接在文件头中设置全局指令,常用指令无非是页眉页脚页码等,如下所示
---
marp: true
theme: default #此为主题
version: 1.0.0 # 版本
header: 我乃页眉
footer: 页脚在此
size: 16:9 # 页面尺寸大小
---
效果如下
其中,default为默认主题,背景是白色的。此外还可以选择uncover和gaia主题。
<!-- -->
可进行单页设置,例如,希望更改某一页的背景色和文字颜色,可以写为如下形式
# 背景设置
<!-- _backgroundColor: lightgray -->
<!-- _color: black -->
其中,backgroundColor用于调控背景颜色,color为文字颜色,在前面加一个下划线,表示该参数只对当前页面有效,否则将更改对后续所有页面的设置。
效果如下
一些常见的指令如下
指令 | 设置内容/说明 |
---|---|
paginate | 如果设置为true,自动显示分页号 |
_paginate | 如果设置为false, 首页分页号不显示 |
header | 设置页头信息 |
footer | 页脚信息 |
class | 样式名 |
backgroundColor | 背景色 |
backgroundImage | 背景图 |
backgroundPosition | 背景图位置 |
backgroundRepeat | 背景重复样式 |
backgroundSize | 背景大小 |
color | 字体颜色 |
图像设置
marp扩展了插入图像的markdown语法,例如下面三张相同的图片,在PPT中展示的效果却不同
![h:200](Libre/pymol_gpcr.gif) ![h:300 blur](Libre/pymol_gpcr.gif) ![h:300 w:200 opacity:0.5](Libre/pymol_gpcr.gif)
其中,h,w
用于设置图像的宽高;blur
用于滤波;opacity:0.5
表示将透明度设为50%。
指令示例 | 功能 |
---|---|
opacity:0.5 | 透明度设为50% |
blur:10px | 按照10像素的模板进行滤波 |
brightness:1.5 | 亮度变为原来的1.5倍 |
grayscale | 打开灰度模式 |
contrast:200% | 对比度调为200% |
hue-rotate:180deg | 色相旋转180° |
invert:100% | 负片 |
saturate:2.0 | 饱和度设为2.0 |
sepia:1 | 复古度设为1 |
通过drop-shadow
参数可以设置图像阴影,例如下面的代码,表示添加垂直5像素、水平10像素、透明度为0.4的黑色阴影。
drop-shadow:0,5px,10px,rgba(0,0,0,.4)
布局设置
通过关键字bg
和left, right
关键字,可以指定背景图片所在位置,例如下列代码
#
![bg left:60%](https://picsum.photos/720?image=29)
## 背景分离
这段幻灯片内容在背景图右边。
如果省略:60%
则默认50%,效果如下