一种用markdown写PPT的方法,再也不用费劲排版了

简介: 一种用markdown写PPT的方法,再也不用费劲排版了

前言


本文源代码位于:https://github.com/pzqu/tools

原创首发:https://coding3min.com/1134.html


今天看jeremyxu 的技术点滴,发现分享了一个 markdown 写 PPT 的插件,惊为天人,先来看看官方效果图。



aHR0cHM6Ly9jb2RpbmczbWluLm9zcy1hY2NlbGVyYXRlLmFsaXl1bmNzLmNvbS8yMDIwLzA2LzE4L3NpUktJbDIxMjcucG5n.png

再看看 jeremyxu 写的效果,我学完了都没学会是怎么写的,直到看了他项目样例我才算是真的学会了。


image.png


参考marp 官方文档可以很快学会用法,但是用的时候去翻比较麻烦,我提炼了常用的语法,最后做了一个 PPT 练手,才算是学会了,现在分享出来以便以后翻阅。


marp 是个什么?


日常工作生活中常常会用到 ppt, 但是 ppt 有时候做起来非常浪费时间,如果不用关心排版,可以专注内容自动排版岂不妙哉?

正好 markdown 就是解决排版的一种语言,有好心人自发开发了一个做 ppt 的利器,只用关注内容,简单分隔一下,稍微改一下样式就可以用了。


安装和上手


下载个VSCode, 天然支持 markdown ,然后在左侧的插件栏中搜索并安装 Marp for VS Code 就可以开始了。为了获得更好的 Markdown 编辑体验,大家不妨再安装一个叫做 Markdown All in One 的插件。


使用 Markdown 输出一份最简单的幻灯片,只需要让编辑器知道两点即可:它是幻灯片(不是文档)以及它该在哪里分页,通过如下代码做到:


---
marp: true
---
幻灯片1
1. asdf
2. asdf
---
幻灯片2
* asdf
* asdf


效果如下


aHR0cHM6Ly9jb2RpbmczbWluLm9zcy1hY2NlbGVyYXRlLmFsaXl1bmNzLmNvbS8yMDIwLzA2LzE5L3BXbFRSYzAwNDIucG5n.png


编辑完成后,通过编辑器右上角的 Marp 图标按钮就可以调出 Export slide deck... 命令并导出幻灯片了。 Marp 插件目前支持导出 HTMLPDF 格式,另外可以将首页导出为 PNGJPEG 格式的图片。


优化样式


当然没有漂亮是样式是不行的,好在可以简单设置呈现,为此我专门做了一个 ppt


image.png


有三款主题可以选择,可以参考themes,有的主题只能居中,我选了一个可居中也可居左的主题。

---
marp: true
theme: gaia
footer: '机智的小熊 2020-06-18'
paginate: true
style: |
  section a {
      font-size: 30px;
  }
---


  • footer 代表是页尾, header 代表页首
  • paginate 是否在右下角标页码
  • style 自定义全局样式,插件所有的样式参考官网提供的样式


首页配置


aHR0cHM6Ly9jb2RpbmczbWluLm9zcy1hY2NlbGVyYXRlLmFsaXl1bmNzLmNvbS8yMDIwLzA2LzE5L2pFUHphajAwNTUucG5n.png

在当前页面头部,用 html 中的注释语法


<!--
_class: lead gaia
_paginate: false
-->


  • _class 当前页面设置 lead gaia 样式(居中),如果前面不加下划线会影响所有页面
  • _paginate 屏蔽右下角页码
  • 其他更详细语法参考官网手册


首页内容如下


![w:160](图片链接)
# Marp for VS Code方法
## 一种用markdown写ppt的vscode插件marp
这款ppt就是我用“写”出来的,用来展示效果。


图片设置

更改长宽


![width:200px](image.jpg)
![height:300px](image.jpg)
![w:200px h:30cm](image.jpg)


图片滤镜(Image Filter)


基于 CSS 的 filter 属性,Marp 可以对图片进行一些基于模糊、亮度、对比度等的操作,如:


![blur:15px](image.png)
![brightness:0.5](image.png)
![contract:150%](image.png)


参考更多 p 图命令


背景图片


针对幻灯片的背景图片, Marp 提供了简单的方式将某张图片设为背景,在方括号中写入 bg 即可


![bg](background.png)



同时通过在 bg 后追加图片的格式属性,如 [bg fit] ,可以具体设置背景图片的缩放方式。其中 cover 表示充满页面, fit 表示拉伸以适应页面, auto 为不做缩放使用原图片比例。


其他图片详细语法, 参考官网文档调整大小、滤镜,图片作背景的布局、尺寸、分割


更改布局

背景图片布局

aHR0cHM6Ly9jb2RpbmczbWluLm9zcy1hY2NlbGVyYXRlLmFsaXl1bmNzLmNvbS8yMDIwLzA2LzE5L0J3UkFyTDE1MTkucG5n.png

![bg](images/9BBDF9.png)
![bg](images/2EC0F9.png)
![bg](images/B95F89.png)


在其中一张图片后加入属性 vertical 将使图片纵向组合。


aHR0cHM6Ly9jb2RpbmczbWluLm9zcy1hY2NlbGVyYXRlLmFsaXl1bmNzLmNvbS8yMDIwLzA2LzE5L095YlVpSzE1MjMucG5n.png


![bg vertical](images/9BBDF9.png)
![bg](images/2EC0F9.png)
![bg](images/B95F89.png)


更新图片与文字位置


有时候想左文右图,或者左图右文的布局,可以设置背景图片的位置

aHR0cHM6Ly9jb2RpbmczbWluLm9zcy1hY2NlbGVyYXRlLmFsaXl1bmNzLmNvbS8yMDIwLzA2LzE5L2ZWb0lyczE1NDUucG5n.png


参考更多背景图片文字排版命令

假如你想加一张完整图片做展示,而不是要上面的样式,可以自行调整图片大小实现


![bg right w:15cm](images/prometheuslogo.png)

aHR0cHM6Ly9jb2RpbmczbWluLm9zcy1hY2NlbGVyYXRlLmFsaXl1bmNzLmNvbS8yMDIwLzA2LzE5L3FZOFJpcTE1NTUucG5n.png


如果是上下排布的长图就不需要加bg了,直接放上去就好了。


### prometheus
此处的图片加阴影`drop-shadow`
![width:30cm height:9cm drop-shadow](images/prometheus.png)


aHR0cHM6Ly9jb2RpbmczbWluLm9zcy1hY2NlbGVyYXRlLmFsaXl1bmNzLmNvbS8yMDIwLzA2LzE5L2EzbkJUaTE1NTYucG5n.png

常用语法汇总


color: red 设置字体颜色

paginate: true 显示页码, _paginate: false 屏蔽当前页面页码

有三款主题可以选择,可以参考themes

官网提供的样式

官网提供的语法汇总

更多 p 图命令

官网文档调整大小、滤镜,图片作背景的布局、尺寸、分割

更多背景图片文字排版命令


引用


相关文章
在markdown中添加视频的两种方法
markdown浏览器中如何添加视频呢?两种方式
|
5月前
|
开发者
Markdown:解放排版,简洁高效的文字创作神器!
Markdown 是一种轻量级标记语言,以易读易写著称,常用于生成 HTML 页面。其简洁的语法加速了排版,尤其在写作、博客和文档领域广泛应用。虽然不擅长复杂排版,但能轻松实现字体大小调整、插入表格、图片和超链接等。Markdown 通过键盘快捷操作,避免了 Word 等软件的繁琐设置。本文将深入讲解 Markdown 语法,助你提升效率。Markdown 适合快速学习,兼容各种文本编辑器,支持导出多种格式,广泛应用于 GitHub 和多个在线平台。
76 0
|
6月前
|
人工智能 前端开发 开发者
编辑技能:使用 Markdown 标记语言仅仅靠键盘也能完成排版,鼠标兄弟可以一边歇着了
Markdown 是一种标记语言,对于 SaaS 服务商和 AI 提示词编写者来说是必备技能。它使用简单的符号如 `#`, `-`, `&gt;` 进行文本排版,无需复杂富文本编辑器。通过键盘输入即可实现标题、列表等样式,比 WPS 或 Word 更便捷。Markdown 广泛应用于云平台社区、问答网站、GitHub 项目文档及开源程序。了解基础后,适应不同平台的自定义语法相对容易,且有多种 Markdown 客户端工具可供选择,如 Typora、MarkText 和 Obsidian。Visual Studio Code 配合插件也是强大工具,适合撰写公众号推文等。
51 4
编辑技能:使用 Markdown 标记语言仅仅靠键盘也能完成排版,鼠标兄弟可以一边歇着了
|
存储 安全 前端开发
数据库markdown版ppt生成
数据库markdown版ppt生成
152 0
|
6月前
在vscode下将ipynb文件转成markdown(.md文件)的方法
在vscode下将ipynb文件转成markdown(.md文件)的方法
973 0
Markdown编辑器学习笔记丨简单好用的排版与记录工具
Markdown编辑器学习笔记丨简单好用的排版与记录工具
|
前端开发 Linux C++
又一款神级插件,这下连PPT都不用装了|在VSCode中用Markdown写PPT
又一款神级插件,这下连PPT都不用装了|在VSCode中用Markdown写PPT
Markdown 文件转化为 PDF,这可能是我能想到比较好的方法了!
Markdown 文件转化为 PDF,这可能是我能想到比较好的方法了!
387 0
Markdown 文件转化为 PDF,这可能是我能想到比较好的方法了!
|
Linux Windows
Marp —用Markdown编写PPT
Marp —用Markdown编写PPT
198 0
Marp —用Markdown编写PPT
|
前端开发 JavaScript 数据建模
JavaScript 使用 Markdown 制作 PPT
markdown 对于开发者来说是一个熟悉的文档格式,编写文档或者博客首选的格式。markdown 文档可以转换为HTML进行展示。在文章《2021 年 6 个GitHub推荐前端项目》中介绍了一个将 markdown 转换为幻灯片的脚本库 Slidev 。
367 0
JavaScript 使用 Markdown 制作 PPT