首页 > 其他分享 >一种用markdown写PPT的方法,再也不用费劲排版了

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

时间:2023-01-03 15:06:27浏览次数:63  
标签:bg markdown Marp 背景图片 PPT images 排版 png 图片


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

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

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

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

参考​​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

效果如下

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

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

优化样式

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

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

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

---
marp: true
theme: gaia
footer: '机智的小熊 2020-06-18'
paginate: true
style: |
section a {
font-size: 30px;
}
---
  • ​footer​​​ 代表是页尾, ​​header​​ 代表页首
  • ​paginate​​ 是否在右下角标页码
  • ​style​​​ 自定义全局样式,插件所有的样式参考​​官网提供的样式​

首页配置

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

在当前页面头部,用 ​​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​​ 为不做缩放使用原图片比例。

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

更改布局

背景图片布局

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

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

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

一种用markdown写PPT的方法,再也不用费劲排版了_背景图片_07

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

更新图片与文字位置

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

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

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

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

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

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

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

### prometheus

此处的图片加阴影`drop-shadow`

![width:30cm height:9cm drop-shadow](images/prometheus.png)

一种用markdown写PPT的方法,再也不用费劲排版了_背景图片_10

常用语法汇总

引用


标签:bg,markdown,Marp,背景图片,PPT,images,排版,png,图片
From: https://blog.51cto.com/u_12392289/5985757

相关文章

  • MarkDown基本使用方法
    Markdown基本语法使用一级标题二级标题三级标题字体加粗斜体斜体加粗去除线引用引用语法的使用>>分割线图片本地图片网络图片超链接baidu列表......
  • vscode写markdown开启实时预览
    安装markdownallinone插件以后编写markdown文档可以,通过command+shift+p打开vscode的配置,输入>Markdown:OpenPreviewtotheSide即可打开预览效果如图也......
  • #MarkDown语法学习
    MarkDown语法学习标题标题用“#”+空格即可表示,一级标题一个#号,二级标题两个#,以此类推,但是最高只支持至6级标题字体字体的变化可以用“*”和“~~”的组合来表示粗......
  • PPT素材网
    PPT素材推荐官网:​​http://www.1ppt.com/​​背景色采用这个,模板才用这个简洁微立体创业融资计划书PPT模板免费下载​​​http://www.1ppt.com/article/33315.html​​......
  • Markdown学习笔记
    Markdown学习一级标题:一个#+一个空格+标题名字+回车二级标题二级标题:2个#+一个空格+标题名字+回车三级标题三级标题:3个#+一个空格+标题名字+回车字体Hello,World!......
  • 从 markdown 中生成目录
    目录1完整代码2使用示例3原理3.1HTML的链接语法3.2markdown列表缩进4代码详解4.1使用「现代」Perl4.2支持utf8编码4.3主循环4.3.1跳过mark......
  • Markdown使用方法
    Markdown使用方法 一级二级标题用#符号来表示层级标题(一共有6级别)也可以用ctrl+数字来表示 引用用>符号来表示这是一段引用 有序列表类似于word,......
  • Python操作Excel、Word、PPT、PDF、复杂文件、通信软件(微信、邮件、飞书、钉钉)、图片
    1、在这几年,我写了本书!很多朋友为了学习如何用Python自动化地处理各种文档,应该都下载过这个文档:python操作excel、word、pdf.pdf。时至今日,仅仅在CSDN一个渠道的下载量便超......
  • Markdown的基本语法(在Typora中展示)
    Typora的基本用法​注意,所有符号用法里面的加号都是不用写的,只是为了让格式显得更加清晰而加。1.各级标题的写法​#+空格+你想输入的标题​  这就是......
  • markdown的基本操作
    Markdown学习标题:二级标题三级标题字体加粗:Hello,World!倾斜:Hello,World!加粗倾斜Hello,World!划掉Hello,World!引用啦啦啦,小陈来学Java了分割线图片......