在VSCode中用Markdown自动生成PPT详细使用指南,支持多种风格和排版,支持ppt转为pdf等

news2024/12/23 3:34:07

在VSCode中用Markdown自动生成PPT详细使用指南,支持多种风格和排版,支持ppt转为pdf等。

在这里插入图片描述
Marp 官网:
https://marp.app/

这款软件也能在 Windows 或 Linux 系统上使用,并不局限于 macOS 系统。
今天要介绍的是 Marp 推出的 VS Code 插件——Marp for VS Code,在 VS Code 安装了这个插件后,意味着我们也可用 VS Code 来制作幻灯片了。

Markdown简洁易用,尤其可以高效的编辑数学公式,而基于Markdown的两个VSCode插件正是今天的主角——Marp和MPE。对于制作简洁的数学类PPT来说,Marp和MPE似乎是最合适的选择,毕竟该类PPT不需要花里胡哨的效果,更应该专注于内容。

Marp虽是一个开源的桌面软件,但可通过VSCode加Marp插件的方式使用,完全能高效地制作轻量的幻灯片。下载安装VSCode后,在其插件栏搜索“Marp for VS Code”,点击安装。
在这里插入图片描述
安装了 Marp for VS Code 插件后,不需要任何配置,就能直接做 PPT。
点击 VS Code「文件」选项卡,选择「新建文件」,在弹出的面板,文件类型选择 Marp Markdown。
在这里插入图片描述
选择 Marp Markdown 文件后,会新建一个下图的文件,开头有一个配置选项 marp: true,表示使用 Marp 来创建 PPT。

在这里插入图片描述
点击文件右上角的「预览」按钮,就可以在右侧看到第一个幻灯片页面。
在这里插入图片描述
上面空空如也,接下来就轮到我们用 Markdown 语法大展身手了:
对于熟悉 Markdown 的朋友不用多说,就像是写文章一样来写 PPT。
如果想要创建第二个页面,只要在末尾添加 3 个短横线 -,下方就会多出一张新的幻灯片。

在这里插入图片描述
不过,如果我们想要在幻灯片中插入图片,就会略微麻烦一些。
直接插入的本地图片,渲染后会显示为丢失,解决的方法是先将本地图片上传到网上(图床),再粘贴图片链接,图片才能正常显示。

在这里插入图片描述
插入的图片会显示为原始的大小,如果图片比较大,会占据整个幻灯片页面,影响其他内容的展示。
在这里插入图片描述
要想解决这个问题,只需要在 Markdown 图片名称的位置,配置一下图片的宽度或高度:
w:300 h:300
这里的 w 和 h 分别是 width 和 height 的缩写,注意 w 和 h 必须是小写。

在这里插入图片描述
更改全局主题
Marp 渲染得到的幻灯片默认为白底蓝/黑字,如果你不喜欢默认的样式,可以在 Markdown 文件的开头,更改 theme 字段的值,来更改幻灯片的全局主题。
theme 字段有 3 个值:
default(默认值,可省略)
uncover
gaia

在这里插入图片描述
下图是 uncover 主题的效果,所有内容都居中显示,引用内容的样式从竖线变为双引号。
在这里插入图片描述
下图是 gaia 主题的效果,白色背景更改为浅黄色,有点像一些阅读类 App 的暖光/护眼模式,但我不确定这种颜色是否真的护眼。

在这里插入图片描述
如果想用 gaia 主题浅黄色的背景,但又想像 uncover 主题那样,让内容居中显示,只要在文件开头的配置中,再添加一个 class 字段,值设置为 lead 即可。
不过最终的效果还是有一点差别,添加了引用和无序列表样式的内容,还是会保持原来的靠左显示。

在这里插入图片描述
更换单个幻灯片的背景和文字颜色
前面设置的主题,属于全局样式,会影响到所有幻灯片的背景颜色。
如果我们想自定义其中一个或多个页面的颜色,也是可以做到的。
在想要更改幻灯片背景色的页面开头,加上 字段,就可以更改页面的背景色。

在这里插入图片描述
这里的颜色可以是颜色的英文,例如上面的蓝色 blue,也可以是 rgb 值,这有点像是在写 CSS 样式了。
更换背景色之后,如果新的背景色与文本内容的颜色区分不明显,就会影响到文本内容的正常观看,这时就需要更改文字的颜色啦。
更改文本内容的颜色,需要在下面多配置一个选项 ,就能自定义文本的颜色。
在这里插入图片描述
既然可以修改单张幻灯片的背景色,那有些人可能就会想到:可不可以更改所有幻灯片的背景色呢?
也是可以的~只要在文件开头新增一个选项 backgroundColor,就能自定义所有幻灯片的背景色。
当然,页面单独设置的背景色会覆盖掉全局设置的颜色,正如你在下图看到的,即便我们将全局的背景色更改为黄色,第二页还是维持了单独设置的蓝色。

在这里插入图片描述
将幻灯片导出为 PDF
最后,无论用 Marp 和 VS Code 来写 PPT 有多么好,最终还是要落回到地面,思考一个问题:如何把你做好的 PPT 分享给其他人?如何让你兼容更多的人或场景呢?
还好 Marp 也为我们考虑到了,支持将渲染得到的 PPT 导出为 PDF 文件。
方法如下:
点击 Marp Markdown 文件右上角的 Marp 图标(三角形图标),在弹出的面板,选择「Export Slide Deck」,就可以将 PPT 导出为 PDF 啦~

在这里插入图片描述
注意事项
如果你的 VS Code 安装了 Markdown 渲染插件 Markdown Preview Enhanced,需要先将这个插件「禁用」或是「卸载」,转而使用 VS Code 后来集成的 Markdown 预览功能,才能正常看到渲染后的 PPT 页面。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/77447.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

PLC-Recorder实现速度高达0.24ms准确周期采集的方法(带时间戳采集)

目录 1、PLC的发送程序 2、PLC连接配置 3、PLC-Recorder侧的通讯设置 4、PLC-Recorder的通道配置 5、PLC-Recorder的变量配置 6、正常通讯情况的界面 7、记录数据的情况 8、小结 如果要以非常高的速度高速采集各种控制器(典型的是PLC)的数据&…

【Linux】gcc/g++

目录 Linux编译器-gcc/g使用 No.1 背景知识 No.2 预处理(进行宏替换) No.3 编译(生成汇编) No.4 汇编(生成机器可识别代码) No.5 动态链接过程 No.6 gcc选项 Linux编译器-gcc/g使用 No.1 背景知识 预处理(进行…

什么是Serverless?

Serverless 无服务器;无主机; Serverless ,按中文翻译,称为「无服务器」。被认为是新一代的云计算发展方向。 在某些场景可以解读为一种软件系统架构方法,通常称为 Serverless 架构 关于 Serverless 的定义&#xf…

留学Assignment写作怎么注意论证方法?

Assignment的论证方法,对于一篇Assignment而言,学会如何论证,对Assignment的逻辑和内容,有一定的作用。掌握常用的论证方法,了解Assignment要求,在Assignment写作的过程中,学会加以应用&#xf…

VMware 安装、移除Ubuntu系统

目录 前言 安装虚拟机 1. 新建虚拟机 2. 进入向导 3. 选择系统镜像 4. 添加系统设置&#xff0c;用户名主机名密码 <实际没啥用...在系统安装过程中才设置的> 5. 设置虚拟机名称&#xff0c;存放位置 6. 磁盘容量 7. 设置虚拟机硬件配置 8. 自定义硬件 9. 开机…

如何实现jwt鉴权机制?

一、是什么 JWT&#xff08;JSON Web Token&#xff09;&#xff0c;本质就是一个字符串书写规范&#xff0c;如下图&#xff0c;作用是用来在用户和服务器之间传递安全可靠的信息 在目前前后端分离的开发过程中&#xff0c;使用token鉴权机制用于身份验证是最常见的方案&…

Unity 发布安卓包的配置

unity版本是&#xff1a;unity5.6.7&#xff0c;主要是我现在工作中只会在一些工业软件中会用到3d部分&#xff0c;所以版本低了一些&#xff0c;感觉低版本打开unity的速度反而更快一些。发布这个帖子主要目的是 Android SDK 可选项太多了&#xff0c;不熟悉的话&#xff0c;根…

数据技术篇之数据同步

第3章 数据同步 1.数据同步基础 直连同步 &#xff08;1&#xff09;什么是直连同步&#xff1f;直连同步是指通过定义好的规范接口 API 和基于动态链接库的方式直接连接业务库&#xff0c;如 ODBC/JDBC 等规定了统 一规范的标准接口&#xff0c;不同的数据库基于这套标准接口…

gnulib源码安装

接上文《autoconf-archive源码安装》&#xff0c; 链接如下&#xff1a; autoconf-archive源码安装_蓝天居士的博客-CSDN博客 上篇文章在构建autoconf-archive的时候&#xff0c;第一步引导构建就出现了错误&#xff0c;如下所示&#xff1a; $ ./bootstrap.sh ./bootstrap…

SSM+Mysql实现的大学校园兼职系统(功能包含注册登录,发布兼职、个人中心、论坛交流、系统公告、查看兼职信息、查看用户信息、私聊等)

博客目录SSMMysql实现的大学校园兼职系统实现功能截图系统功能使用技术代码完整源码SSMMysql实现的大学校园兼职系统 本系统是一个在线的大学校园兼职系统&#xff0c;商家可以在上面发布自己的兼职&#xff0c;学生可以根据自己的需要&#xff0c;联系兼职&#xff0c;给学生…

JavaScript 中如何实现并发控制?

一、并发控制简介 在日常开发过程中&#xff0c;你可能会遇到并发控制的场景&#xff0c;比如控制请求并发数。那么在 JavaScript 中如何实现并发控制呢&#xff1f;在回答这个问题之前&#xff0c;我们来简单介绍一下并发控制。 假设有 6 个待办任务要执行&#xff0c;而我们…

Kubernetes HPA 动态弹性扩缩容

1.HPA 1.1HPA介绍 1.在Kubernetes中&#xff0c;HPA自动更新工作负载资源&#xff08;例如&#xff1a;Deployment或者StatefulSet&#xff09;&#xff0c;目的是自动扩缩工作负载以满足需求&#xff0c;水平扩缩意味着对增加的负载的响应是部署更多的 Pod&#xff0c;与垂直…

算法工程师深度解构ChatGPT技术

引言 | 本栏目特邀腾讯知名语言文本项目算法工程师冉昱、薛晨&#xff0c;用专业视野带你由浅入深了解ChatGPT技术全貌。它经历了什么训练过程&#xff1f;成功关键技术是什么&#xff1f;将如何带动行业的变革&#xff1f;开发者如何借鉴ChatGPT思路和技术&#xff0c;投入到日…

西门子PLC S7-1500产生精确时间戳及各种数据处理的方法

目录 1、完整程序 2、将时钟转换成整型数 3、获取相对时间 4、转成微秒&#xff08;μs&#xff09;&#xff0c;并转成32位无符号整数 5、翻转的问题 6、有时间戳采集时的对时机制 在数据采集时&#xff0c;精准的相对时间是非常重要的。尤其是高速采集时&#xff0c;上位…

算法训练第四十五天 | LeetCode 70、322、279背包问题

LeetCode 70爬楼梯 题目简析&#xff1a; 假设你正在爬楼梯。需要 n 阶你才能到达楼顶。 每次你可以爬 1 或 2 个台阶。你有多少种不同的方法可以爬到楼顶呢&#xff1f; 思路分析&#xff1a; 用完全背包的思路来做&#xff0c;见注释 //普通dppublic int climbStairs(in…

Redis框架(四):大众点评项目 基于Redis的短信登录

大众点评项目 基于Session的短信登录需求&#xff1a;基于Redis实现短信验证登录基于Redis的短信登录实战优化为Redis login方法配置拦截器实现双重验证配置类实现异步/排序 拦截结果展示SpringCloud章节复习已经过去&#xff0c;新的章节Redis开始了&#xff0c;这个章节中将会…

【图像处理】DWT图像处理【含Matlab源码 198期】

⛄一、数字图像处理简介 图像处理基础教程链接 1 【基础教程】基于matlab图像处理&#xff08;表示方法数据结构基本格式类型转换读取点运算代数运算&#xff09;【含Matlab源码 834期】 2 【基础教程】基于matlab图像处理&#xff08;读写显示运算转换变换增强滤波分析统计&a…

jvm学习笔记(一)----jvm简史

文章目录1. JVM简单介绍2. java虚拟机介绍1. JVM简单介绍 虚拟机是一种抽象化的计算机&#xff0c;通过在实际的计算机上仿真模拟各种计算机功能来实现的。Java虚拟机有自己完善的硬体架构&#xff0c;如处理器、堆栈、寄存器等&#xff0c;还具有相应的指令系统。Java虚拟机屏…

ASP.NET微信快速开发框架源码【源码分享】

ASP.NET微信快速开发框架源码 微信公众平台快速开发框架源码 需要源码学习&#xff0c;查看文末卡片获取&#xff0c;或私信我。 框架主要技术&#xff1a; ASP.NET MVC5、ASP.NET Identity、Bootstrap、KnockoutJs、Entity Framework等。 主要特色&#xff1a; 1、快速迭代开…

Redis主从复制原理

前面的文章中我们演示过Redis主从配置的操作&#xff0c;可以查看之前的博文Redis主从配置教程。这篇文章主要介绍一下Redis主从复制的工作过程和原理。 Redis复制工作过程 Redis复制的工作过程如上图&#xff0c;主要包含以及几个阶段&#xff1a; 1. 设置IP端口并建立连接 …