听说这个工具解放了程序猿写 PPT 头秃的困扰

有时候着急想赶一个 ppt 出来,能用就行;有时候想把 ppt 放到 git 里可追溯;有人喜欢用 Markdown 搞定一切文档,还想把 ppt 放到网页上。有没有工具可以做到这一点?有, marp,用 Markdown 写 ppt。

Marp 存在的意义

md 本身偏 Geek,用 Markdown 写 ppt,是属于小众需求。确实有一些场景希望使用 md 来写 ppt,因为大部分 ppt 结构和风格比较统一,如果需要大量产出 ppt 或者 pdf,使用技术辅助是自然的想法。

marp 做的不错,官方网址 https://github.com/marp-team/marp/

Marp is the ecosystem to write your presentation with plain Markdown.

  • 使用插件把 md 解析成 html 片段,加入特定语法辅助完成 ppt 的制作。
  • 可以预览效果,导出为 ppt pdf 等。
  • 提供默认主题,可以自定义主题
  • 引入 cli npm 包,可以二次开发,应对其他技术场景

想想吧,这么有规律,岂不是可以做教育 ppt,做 GUI 可拖拽的页面。定制 css 主题就行了。

如何使用

这里我就说最常用的用法,在 vscode 里使用。vscode 本身可以预览 md 文档,搭配 marp插件可以直接预览。

看我这个截图,我没有使用任何的主题,完全是自己写样式。

  • 安装 marp 插件
  • 新建 md 文件,点击 右上角蓝色的marp图标,一个是导出,一个是切换显示
  • marp: true 添加了这个 meta 标签,会自动从普通预览模式编程幻灯片模式
  • 使用 --- 来分页

也可以使用 theme主题。在 vscode 目录里添加 /.vscode/setting.json

1
2
3
4
5
{
"markdown.marp.themes": [
".vscode/index.css"
]
}

这样就可以使用自己的 css 了。没啥好说的,就看我截图。每一页是一个 section

主题

PPT 默认很丑,如何自定义?这就用到自定义主题了。

首先可以按照我的截图所示。创建 css文件,注意第一行定义了主题名。

然后在 md 里使用 theme 主题。

定义背景

如何自定义每一页背景?在 section 里设置

1
2
3
<!-- backgroundColor: aqua --> # 当前和接下来的背景颜色
<!-- _backgroundColor: aqua --> # 单独一页
# 当然也包裹 backgroundImage

定义布局

每一页想使用不同的布局?

可以用class,指定 section 的 class,这样我们写主题时:

  • section.a
  • section.b
1
<!-- _class: a -->

可以定义多种样式。

其他的我看了看文档,都没啥用

图片特效

图片如何引入 ![](image.jpg) 常规写法。

可以加关键词,比如:

1
2
3
4
5
6
7
8
<!-- ![w:90% bg](theme/style/bg.jpg) -->
<!-- ![w:90% bg](theme/style/bg.jpg) -->
<!-- ![center bg blur](theme/style/bg.jpg) -->
<!-- ![bg brightness:.7 left](theme/style/bg.jpg) -->
<!-- ![center bg blur](theme/style/bg.jpg) -->
<!-- ![center bg blur](theme/style/bg.jpg) -->
<!-- ![center bg blur](theme/style/bg.jpg) -->
<!-- ![w:90% bg](theme/style/bg.jpg) -->
  • w:90% 定义宽度
  • bg 设置为背景
  • bg center 背景位置
  • bg blur:2px 模糊
  • brightness:.45明亮 >1 <1 的区别
  • drop-shadow 图片的阴影
  • grayscale 黑白滤镜
  • opacity:.3透明度

其他的没啥用了。

1
2
3
4
5
![bg left](https://picsum.photos/720?image=29)

# Split backgrounds

The space of a slide content will shrink to the right side.

这样还挺好看的。

官网地址

请我喝杯咖啡吧~