Awesome Marp:我开发了一整套 Marp 主题,Markdown 转换的 PPT 也可以很好看!

使用 Markdown 语法进行演示文稿的创作,只关注内容本身而非格式。 有自定义模板加持,规范化 PPT 制作的同时,又不失个人特色。 Awesome Marp v1.0 一次性提供了 6 种颜色主题,21 种局部样式,原生 Marp 不支持的页面分栏、导航进度栏等,Awesome Marp 都能很好地实现! 如果对你有帮助,欢迎转发、转载、后台评论,期待交流~

为什么要做 Awesome Marp?

自从了解到 Marp 可以使用 Markdown 语法来创作 PPT 之后,我有两年多没有使用 PowerPoint 做过演示文稿了。

Marp 内置的原生主题样式数量少,并且呈现效果不好看,所以一直以来我也在尝试自定义 CSS 文件,来打造符合个人审美的 theme。我在边改造边用的过程中,这套模板也得到了几位朋友的喜爱。于是索性简单写篇推文介绍一下,希望能给到你一些帮助~

我给这套主题还起了个名字,Awesome Marp,算是一个阶段性总结吧。目前 v1.0 版本提供了六种主题,分别是深色、绿色、蓝色、红色、紫色和棕色。

首先,先来看一张效果动图吧~

怎么样?如果你也使用过 Marp 原生的 theme,一定会发现 Awesome-Marp 变化真的很大了。是的,我基于 Marp 的default 主题,做了不小的改动。

这是一个纯 CSS 的项目,所有的效果都是 CSS 语言实现的。因为并没有前端基础,所以我是一边学一边改,代码还有不少可以再完善优化的地方。但,完成比完善更重要嘛,一些小的问题可以日后迭代更新。于是,就决定将 Awesome Marp 上线了!

本着「开箱即用」的原则,我将本项目文件夹打包上传到了GitHubGitee。你可以去那里下载项目文件夹,也可以在公众号后台获取链接(后文有回复码)~

你需要了解的软件工具

就三样:Markdown 语法、Markdown 编辑器(Visual Studio Code)和 Marp for VScode 插件!

  • Markdown:
  • Markdown 编辑器(如 VS Code):
  • Marp:

Awesome Marp 的几个特色

  • 支持 4 种页面分栏的样式:分别是两栏五五分、两栏六四分、两栏七三分和三栏三三分
  • 支持 4 种非嵌套列表的分栏样式:
  • 支持导航进度栏:
  • 支持 5 种类型的封面页:
  • 支持 3 种类型的目录页:
  • 支持 5 种自定义「引用盒子」(类似于 Beamer 的定理框):
  • 小彩蛋:链接会自动增加一个小尾巴:
  • 还可以自定义实现图片的水平排列方式:居中对齐、居左对齐或居右对齐,实现方式也很简单:

    • 图片水平居中对齐:![#c](a.png)
    • 图片水平居右对齐:![#r](b.png)
    • 图片水平居左对齐:![#l](c.png)
  • ......

总结一下,实现类似上面的效果,需要自定义样式(也就是局部指令),目前 Awesome Marp 1.0 版本一共支持 21 个!

不光如此,我还设计了 6 种主题色,想要切换 theme,只需要可在 YAML 区定义 theme: <theme_name>

如何使用 Awesome Marp?

  • 如果你想「拿来即用」,直接根据我分享的 Markdown 源码文件,对照修改就好了~
  • 如果你对部分效果不满意、期望简单微调的话,目前在 Awesome-Marp/themes 下有 6 个 CSS 文件,这些 CSS 文件决定了 Markdown 源码的最终渲染效果,可以试着改一改~
  • 如果你能够自行定制个性化 CSS 文件,渲染之前,别忘了在 Awesome-Marp/.vscode/settings.json 里加上你的 CSS 文件路径~

我猜可能会出现的问题

  • 你的呈现效果与我不同:
    • 可能是因为你没有安装相关字体文件。因担心版权问题,需自行下载字体并安装,Awesome Marp 用到的字体有:
    • 英文字体:Adobe Garamond / Latin Modern Math / Optima LT Medium / Fira Code
    • 中文字体:方正宋刻本秀楷体 / 方正苏新诗柳楷简体 / 霞鹜文楷 / 叶根友毛笔行书修正版
  • 自定义 CSS 不生效:
    • 可能因为你没有在 VS Code 的设置文件 settings.json 中引入自定义的 CSS 路径
    • 可参考 ./Awesome-Marp/.vscode/settings.json 照猫画虎

最后

Awesome Marp 第 1 版的样式,感觉已经基本够用了,还有一些想法没有呈现出来,我会根据自己的使用体验和大家的反馈,不定期迭代更新~

欢迎交流 💡 ~

创作不易,转赞评来一个~

相关推荐
一只fish2 天前
一文了解Markdown
html·markdown
vortex53 天前
CheatMD:让 Markdown 笔记变成可执行的交互式命令
笔记·网络安全·markdown
MIXLLRED4 天前
随笔——在 Ubuntu 22.04 中查看 Markdown (.md) 文件
linux·运维·ubuntu·markdown
不剪发的Tony老师6 天前
MarKing:一款现代化专业级Markdown编辑器
文本编辑器·markdown·知识管理
Soari6 天前
GitHub 开源项目解析:microsoft/markitdown —— 面向 LLM 的多格式文档转 Markdown 工具
microsoft·开源·github·markdown·rag
仿生狮子9 天前
🎼 从文本到交互界面——GenUI 的中庸之道
前端·vue.js·markdown
X档案库11 天前
告别臃肿与残缺!MarkShareX——AI原生+Rust轻量自托管Markdown博客,一站式建站首选
ai·博客·markdown
小皮咖13 天前
推荐一个在线 Markdown 编辑器:Suporka MD
markdown
searchforAI13 天前
Obsidian一键获取视频笔记内容,AI做知识管理+内容创作
人工智能·笔记·gpt·学习·知识图谱·markdown·知识库
前面有光15 天前
markdown学习
markdown