序言
时间总是过得很快,转眼间又到了一年一度的年终时刻。本来应该吃着火锅唱着歌,坐等过年。
然后就被通知需要做汇报ppt以及提交年终总结!!!!
瞬间摸鱼都不爽了,实话是本人是ppt以及文档苦手,也有点懒,写两份材料了属于要了老命了
ppt需要找模版,各种拖拽也十分麻烦
那么有没有一种优雅,高效,不需要关心样式,同时可以导出多种版本,又符合程序猿美学的方案可以快速完成ppt呢?
当然是有的!
这也是本文的主题:使用AI,marpit快速完成ppt
前置条件
vscode ! vscode !
主题是快速:那肯定不能配置半天环境,虽然方案不强制编辑器,但配置半天环境不如ppt去拖拽
vscode 安装以下两个插件:通义灵码 、Marp for VS Code,
第一步
先请出重量级主角:AI
AI可以直接生成markdown形式的全废话年终总结,虽然基本无法直接使用。但是可以很清晰生成你要的文档结构。
用chatgpt、还是文心一言啥的随意。
因为可以直接vscode插件使用,我这里用的通义灵码:

可以看到有个大致的结构和一堆废话了。
marp
然后请出主角marp
Marp 是一个使用普通 Markdown 编写演示文稿的工具。
语法、指令可以查看官方文档 Directives (marp.app)
以及marp for vscode 文档 Marp for VS Code - Visual Studio Marketplace
本文假定你只想快速搞定事情,而不想去看各种乱七八糟的指令,同时已安装marp for vscode 插件
新建marp文件

点击新建文件,在弹出的列表中选择marp markdown即可。

点击在侧边浏览就可以看到初始的效果了
然后复制AI生成的markdown文本到中间去
同时每个标题用分隔---
隔开

事实上,如果你只想要足够简洁明了的ppt,到这一步就已经完成了,润色下文本就可以跳到导出部分看。
指令
marp提供了相当多的指令供你选择,详细指令可以阅读官方详细文档。
指令分为全局指令和局部指令。
全局指令
全局指令需要在mark 文件开头设置。
markdown
---
marp: true
title: 2023 年终总结
paginate: true
author: mingshengLazy
header: ""
footer: 2023 年终总结 mingshengLazy@xxx.com
size: 16:9
---
以上指令都是啥呢?
- title: 导出时候的标题
- paginate: 显示页面下标
- author: 作者名
- header: 设置header,格式为标准markdown输出
- footer: 设置footer,格式为标准markdown输出
加上这些指令输出变成啥样了呢?

可以看到相关指令成功的应用了
marp for vscode提供了快捷键可以快速查看指令提示
以mac为例 ctrl+space 就可以看到全部指令

局部指令
在切片中生效的指令,几乎与全局指令一致,只不过是只作用于当前切片以及切片以后的指令。
如果要只作用于当前切片,需要在指令前添加_
。
markdown
---
<!-- backgroundColor: red -->
---
<!-- _backgroundColor: red -->
---

一样可以查看快捷键,给予提示
主题
指令能够丰富你的页面,很多时候他已经足够了,通过局部或者全局的style能修改每个切片的样式,但是这就非常繁琐了,不符合我们快速的主题了
这时候theme这个指令就非常重要了,这个指令可以加载markdown样式文件,只要你将这个css文件注册成主题。
官方默认提供了三种主题:default
gaia
uncover


deault 就是默认,这里就不给图了
自定义主题
可以寻找任意你觉得好看的markdown样式,将它注册成主题
你可能有点迷茫,不知道去哪里找,一个好方法是打开掘金编辑器查看主题,去github搜索相关主题

比如我选择应用fancy这个主题
xitu/juejin-markdown-themes: Markdown themes of https://juejin.cn/ (github.com) 在这里就能找到开源的样式列表

需要注意的是我们需要的是css文件,而这个是scss文件,所以还需要转换

同时scss文件根类需要替换成section
转换的结果就像这样

随便找个在线的scss转css网站就可以了
注册主题
有了样式文件需要注册
注意官方文档给出的方法,新建.vscode 文件夹经过我的测试是无效的,跟着我的方法来就好

可以看到css文件已经放在和md文件同级目录下,实际上随便放在哪里,只要路径对就好,这里为了省事直接放同级就好
然后打开 首选项->设置->搜素·marp·
可以看到这条设置
添加你的路径
同时在你的css主题文件中 加入/@theme 你想注册主题的名字
下面的导入可以导入你想继承的主题:这里我继承default主题

这是一般已经注册完成
验证一下你注册的主题
可以看到在提示中,已经出现了你注册的主题

最终效果


是不是效果看着还行呢
导出
marp 支持多种导出方式


这下,不管领导要啥形式的都可以了
致谢
码字不易,如果觉得本篇文章对你有用可以能给个关注吗!!,非常感谢