Awesome Marp:轻松取代 LaTeX Beamer!
为什么要做 Awesome Marp?
自从了解到 Marp 可以使用 Markdown 语法来创作 PPT 以来,我已经两年多没有使用 PowerPoint 制作演示文稿了。
Marp 内置的原生主题样式数量较少,且呈现效果不够美观,因此我一直在尝试自定义 CSS 文件,以创造符合个人审美的主题。在边修改边使用的过程中,这套模板也得到了几位朋友的喜爱。于是我决定将其分享出来,希望能对你有所帮助~
我给这套主题起了个名字,叫做"Awesome Marp",算是一个阶段性的总结。目前 v1.3 版本提供了 6 种主题(分别是深色、绿色、蓝色、红色、紫色和棕色)和 38 种自定义样式。
首先,让我们来看一张效果动图吧~
怎么样?如果你也使用过 Marp 原生的主题,一定会发现 Awesome-Marp 的变化真的很大。没错,我基于 Marp 的"default"主题进行了不小的改动。
这是一个纯 CSS 的项目,所有效果都是通过 CSS 语言实现的。由于我没有前端基础,所以是边学边改,代码还有不少可以优化的地方。但是,完成比完善更重要,一些小问题可以日后迭代更新。因此,我决定将 Awesome Marp 上线了!
你需要了解的软件工具
只需要三样:软件 Visual Studio Code 或 Obsidian、Marp for VScode(插件)!
-
Markdown 是一种极轻量的文本标记语言,允许人们使用易读易写的纯文本格式编写文档,而且对于表格、代码、图片、公式等支持良好,在网站搭建、课程笔记/讲义、演示文稿、撰写学术论文等方面应用极为广泛。
-
Markdown 编辑器(如 VS Code、Obsidian)
-
Marp 是使用 Markdown 创作演示文稿的工具。
Awesome Marp 的几个特色
- 支持 8 种页面分栏样式:包括两栏五五分、两栏六四分、两栏七三分、两栏四六分、两栏三七分、三栏三三分、两行分栏和品字型分栏
- 支持 6 种非嵌套列表的分栏样式:两列+有序列表+方形序号、两列+有序列表+圆形序号、两列+无序列表+方形序号、两列+无序列表+圆形序号、单列+有序列表+方形序号、单列+有序列表+圆形序号
- 支持导航进度栏:
- 支持 5 种类型的封面页:
- 支持 3 种类型的目录页:
- 支持 5 种自定义 Callouts(类似于 Beamer 的定理框):
- 小彩蛋:链接会自动增加一个小尾巴:
- 还可以自定义实现图片的水平排列方式:居中对齐、居左对齐或居右对齐
- 图片水平居中对齐:
![#c](https://raw.githubusercontent.com/favourhong/Awesome-Marp/main/images/a.png)
- 图片水平居右对齐:
![#r](https://raw.githubusercontent.com/favourhong/Awesome-Marp/main/images/a.png)
- 图片水平居左对齐:
![#l](https://raw.githubusercontent.com/favourhong/Awesome-Marp/main/images/a.png)
- 图片水平居中对齐:
- ……
总结一下,像上面这样的自定义样式,目前 Awesome Marp 1.3 版本一共支持 38 个!使用时只需要在页面指定局部指令,比如:<!-- _class: trans -->
)
不仅如此,我还设计了 6 种主题色,想要切换主题,只需要在 YAML 区定义 theme: <theme_name>
:
如何使用 Awesome Marp?
-
使用方法:
- 配合 VS Code:直接用 VS Code 打开
Awesome-Marp
文件夹- 如果你想"即拿即用",直接参照我分享的 Markdown 源码文件进行修改即可~
- 如果你对某些效果不满意、想要简单调整,目前在
Awesome-Marp/themes
下有 6 个 CSS 文件,这些 CSS 文件决定了 Markdown 源码的最终渲染效果,可以尝试修改~ - 如果你能自己定制个性化 CSS 文件,渲染前别忘了在
Awesome-Marp/.vscode/settings.json
中添加你的 CSS 文件路径~
- 配合 Obsidian:安装 Marp Slides 插件,并配置相应的 CSS 路径
- 配合 VS Code:直接用 VS Code 打开
-
字体:出于版权考虑,需自行下载并安装字体,Awesome Marp 使用的字体包括:
- 正文字体:
Latin Modern Math
、方正宋刻本秀楷简体
,若未安装,默认使用Calibri
和楷体
- 标题字体:
Optima LT Medium
、方正苏新诗柳楷简体
,若未安装,默认使用Arial
和黑体
- 脚注字体:
Charm
和叶根友毛笔行书修正版
,若未安装,默认使用Calibri
和楷体
- 代码字体:
Fira Code
和霞鹜文楷等宽
,若未安装,默认使用Consolas
和华文中宋
- 正文字体:
更新记录
2024年1月13日
Awesome Marp v1.3- 38 种自定义样式
- 新增两行分栏、品字型分栏等
- Awesome Marp v1.3:几处小更新~
2023年10月16日
Awesome Marp v1.2- 30 种自定义样式
- 在 v1.1 基础上新增脚注(1个)、调节字体大小(4 个)共 5 个自定义样式
- 新增免安装字体
- Awesome Marp v1.2:增加脚注、调节字体大小等样式~
2023年9月26日
Awesome Marp v1.1- 25 种自定义样式
- 在 v1.0 基础上新增固定标题行(2 个)、页面四六分栏、页面三七分栏(2 个)共 4 个自定义样式
- Awesome Marp v1.1:标题行不随正文浮动,这下更像 Beamer 了!
2023年9月24日
Awesome Marp v1.0
希望对你有所帮助,欢迎交流 ~
创作不易,欢迎赞赏 🤙~