02-用代码玩转PPT

最新推荐文章于 2025-03-27 14:26:53 发布
最新推荐文章于 2025-03-27 14:26:53 发布
阅读量5.8k 收藏 6
点赞数
分类专栏： 教你用代码玩转PPT
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/isscollege/article/details/103186766
版权
这篇博客介绍了如何使用代码和Visual Studio Code（VS Code）配合Marp插件来制作PPT。首先，讲述了打造IDE的过程，包括安装和配置Marp插件，以及设置PPT主题。接着详细讲解了从创建Markdown文档、设置预览、编写PPT内容到导出PPT的每个步骤，包括素材准备、编写规则、页脚设置、图片调整等。最后，提到了导出PPT为pptx格式的操作流程。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

用代码玩转PPT

1 打造IDE

1.1 工欲善其事，必先利其器

在学习了MarkDown的基本语法之后，我们就可以开始打造PPT之旅了，但是在这之前，我们还有一件非常重要的事情，那就是来武装我们的IDE，让我们的IDE具备代码撸PPT的能力。

我们需要用到的工具如下：

  1. Visual Studio Code

    下载地址：https://code.visualstudio.com

    本系列课程的主角，大家熟悉的前端工具VS Code，通过marp插件支持将MarkDown预览和导出PPT，同时支持导出成图片，pdf等格式。

  2. Marp插件

    官网地址：https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

    你不必在此网址安装Marp插件，我们可以通过VS Code的应用市场直接安装

  3. 已经定义好的PPT主题

1.2 为VS Code安装Marp插件

相信VS Code不用做过多的介绍，搞过前端的同学都非常熟悉，我们就从为VS Code安装Marp插件开始，在为VS Code安装插件之前，我们先创建代码存放的文件，然后在VS Code中打开该文件夹作为我们的工作目录：
在这里插入图片描述

选择事先创建的文件夹：
在这里插入图片描述

设置好代码存放的文件夹之后，我们开始为VS Code安装插件，在【View】>【Extension】菜单下搜索marp插件进行安装。

在这里插入图片描述

点击【install】按钮之后，等待marp插件安装完成。

1.3 配置marp插件

待到上一步marp插件安装完成后，【install】按钮会自动变成设置按钮，此时点击设置按钮对marp插件进行设置，我们在此处重点关注3个方面的设置：

  1. 设置谷歌浏览器位置，无论是预览和导出，marp插件都依赖此设置
  2. 设置默认的导出文件类型，可以修改为pptx
  3. 设置ppt主题位置

ppt主题如果没有的话可以使用默认主题，此处就不必设置，由于我们这里使用的是自定义主题，因此需要在此处设置主题存放的位置。

在这里插入图片描述

点击【AddItem】按钮在输入框中输入主题存放路径：

D:\myWorkspace\vscodework1101\code-4-ppt\custom-theme\iss-basic-theme.css

该主题请从课件扩展资料中获取，并将整个custom-theme文件事先拷贝到工作空间code-4-ppt文件夹中：

在这里插入图片描述

Node

  1. 设置主题位置时一定使用绝对路径，如果使用相对路径，则相对于md文件的位置，而且预览时不能保证工作正常。

  2. 需要指定到css文件的位置

2 开始编写PPT

2.1 准备素材和文件夹

在项目存放文件夹code-4-ppt下创建images文件夹用于存放ppt内容中用到的图片素材资料。并将制作相关图片拷贝到此处。

在第一步，选择code-4-ppt处，在第二步点击新建文件夹按钮

在这里插入图片描述

2.2 创建markdown文档

和上一步类似，在code-4-ppt目录中点击创建文件按钮，建立名为的《用代码玩转PPT.md》markdown文档，注意扩展名为md。
在这里插入图片描述

我们这里的md文档就相当于最终导出PPT的源码，我们完成md文档的编写，并随时通过marp插件预览，编写完成后将通过marp插件导出为pptx格式，也就完成了我们的PPT制作过程。

2.3 设置预览插件

在md编辑界面，点选1处的marp插件图标，在弹出框中选择2处切换marp插件预览，这时会在md文档头部添加如下代码：

---
marp: true
---

在这里插入图片描述

说明：

  1. 两条虚线之间的内容为支持YAML语法的文件头说明
  2. marp:true表示使用marp插件进行预览，如果为false则会使用vs code的默认markdown视图预览。

2.4 设置md头部

同样md文件头部的两条虚线之间，添加如下代码：

---
marp: true
theme: iss-basic-theme
headingDivider: [1,2,3,4,5,6]
---

说明：

  1. theme:iss-basic-theme设置的是自定义的PPT主题，就是我们前面导入的主题，名字和iss-basic-theme.css第一行注释@theme后面指定的主题名称一致：
/* @theme iss-basic-theme */
  1. headingDivider: [1,2,3,4,5,6]指定了md文档中作为每页幻灯片分隔的标记，这里是一个数组，表示在H1~H6号标题前面自动分隔为一页新的PPT
  2. 如果没有指定PPT分隔或者想在md内容中强制分隔ppt需要使用空行+虚线
此处空行
---

当某页ppt内容较多时建议使用此方式强制分隔ppt。

2.5 md编写PPT的规则

设置好md头部信息后，我们就进入了ppt的编写环节了，使用md编写ppt，为了同时适应md的渲染和ppt的预览，我们有必要记住一些规则，我们大的方针就是尽量少在md中插入跟ppt预览和生成相关的代码，从而更少地干扰md内容的显示。

我们需要谨记的规则如下：

  1. 一级标题做本章名称

  2. 一级标题下内容做本章副标题，尽量控制字数

  3. 在一级标题下使用列表表示PPT目标或目录

  4. 二级标题作为PPT内的节标题，二级标题下不要写正文内容，如果真的想写内容，将该部分内容放到三级标题下，可三级标题叫做概述或者背景，前言之类。

  5. 三级标题~六级标题会自动作为每页ppt的标题，其下正文作为该页ppt的内容

  6. 三级标题~六级标题下的内容建议使用有序和无序列表，可以插入图片，如果使用大量文本，需要使用空行+虚线强制分隔ppt

  7. 通过下面的html注释可以设置ppt的页脚：

    <!--  footer: '版权所有     北京软通动力教育科技有限公司' -->

    只要开始使用ppt页脚，后续ppt会自动带上页脚，如果中间想取消页脚需要按如下设置：

    <!--  footer: '' -->

  8. ppt正文中出现图片时，如果图片显示不全，尽量设置图片宽度，高度会自动调节

  9. ppt页尾致谢内容请使用一级标题：

# THANK YOU
<!-- footer: '' -->

2.6 编写PPT首页

按上面2.5说明的PPT编写规则，我们的PPT首页应该使用一级标题编写，并使用一行正文作为副标题，其代码如下：

---
marp: true
theme: iss-basic-theme
headingDivider: [1,2,3,4,5,6]
---
# 用代码玩转PPT
MarkDown入门系列
预览PPT

单击IDE右侧预览图标进入PPT预览视图：

在这里插入图片描述

预览效果：

在这里插入图片描述

2.7 编写PPT目录页

  1. 首先使用空行加虚线强制另起一页PPT
  2. 在html注释中通过局部指令指定该页PPT使用的样式为content
  3. 使用markdown的加粗标记显示目录名称
  4. 使用有序列表显示各节内容

代码：


---

<!--  _class: content  -->

**本章目标**
1. 打造IDE
2. 开始编写PPT
3. 导出PPT

说明：

代码第4行：_class是marp局部指令，用于临时指定该页PPT的样式，该样式在主题CSS中有定义，该段代码需要包含在html注释中。

预览效果：

在这里插入图片描述

2.8 编写分节页面

在PPT目录之后就应该开始第一节内容的讲解，根据我们前面讲述的规则，节内容使用2号标题，PPT会在2号标题前自动分页，2号标题下面尽量不要有正文（如果有正文会无法显示）

代码如下：

## 1 打造IDE

预览效果：

在这里插入图片描述

2.9 编写内容PPT

我们使用3号标题作为PPT页标题，因此内容页PPT代码应该像下面这样：

### 1.1 工欲善其事，必先利其器

在学习了MarkDown的基本语法之后，我们就可以开始打造PPT之旅了，但是在这之前，我们还有一件非常重要的事情，那就是来武装我们的IDE，让我们的IDE具备代码撸PPT的能力。

我们需要用到的工具如下：

1. Visual Studio Code

   下载地址：[https://code.visualstudio.com](https://code.visualstudio.com/)

   本系列课程的主角，大家熟悉的前端工具VS Code，通过marp插件支持将MarkDown预览和导出PPT，同时支持导出成图片，pdf等格式。

2. Marp插件

   官网地址：https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

   你不必在此网址安装Marp插件，我们可以通过VS Code的应用市场直接安装
   
3. 已经定义好的PPT主题

   从课程资料中获取软通大学参考PPT主题

   随存通位置：custom-theme

生成的预览效果是这样的：

在这里插入图片描述
此时会将3号标题自动识别为PPT页标题，但由于本页内容较多，有序列表中的内容没有显示完整，此时我们需要强制干预PPT分页，将此处分成两页PPT，考虑到要加入PPT页脚，因此PPT换页的最佳位置是有序列表2的前面，因此在此处插入空行加虚线标记进行换页。

最后的代码和下面类似：

### 1.1 工欲善其事，必先利其器

在学习了MarkDown的基本语法之后，我们就可以开始打造PPT之旅了，但是在这之前，我们还有一件非常重要的事情，那就是来武装我们的IDE，让我们的IDE具备代码撸PPT的能力。

我们需要用到的工具如下：

1. Visual Studio Code

   下载地址：[https://code.visualstudio.com](https://code.visualstudio.com/)

   本系列课程的主角，大家熟悉的前端工具VS Code，通过marp插件支持将MarkDown预览和导出PPT，同时支持导出成图片，pdf等格式。

---
2. Marp插件

   官网地址：https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

   你不必在此网址安装Marp插件，我们可以通过VS Code的应用市场直接安装
   
3. 已经定义好的PPT主题

   从课程资料中获取软通大学参考PPT主题

   随存通位置：custom-theme

预览效果，ppt已经分成两页：

在这里插入图片描述

2.10 设置PPT页脚

我们需要为内容页PPT设置带有版权信息的页脚，此时只需要在第一个需要页脚的PPT中进行设置，后面的PPT会自动带有页脚。

页脚需要写在标题下面，通过html注释插入全局footer指令，添加页脚的代码：

<!--  footer: '版权所有     北京软通动力教育科技有限公司' -->

如果某页ppt不需要页脚（比如节标题页面）需要在该PPT前面添加如下代码：

<!--  footer: '' -->

同样会影响其后面的所有PPT。

此时代码：

### 1.1 工欲善其事，必先利其器
<!--  footer: '版权所有     北京软通动力教育科技有限公司' -->
在学习了MarkDown的基本语法之后，我们就可以开始打造PPT之旅了，但是在这之前，我们还有一件非常重要的事情，那就是来武装我们的IDE，让我们的IDE具备代码撸PPT的能力。

我们需要用到的工具如下：

1. Visual Studio Code

   下载地址：[https://code.visualstudio.com](https://code.visualstudio.com/)

   本系列课程的主角，大家熟悉的前端工具VS Code，通过marp插件支持将MarkDown预览和导出PPT，同时支持导出成图片，pdf等格式。

---
2. Marp插件

   官网地址：https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode

   你不必在此网址安装Marp插件，我们可以通过VS Code的应用市场直接安装
   
3. 已经定义好的PPT主题

   从课程资料中获取软通大学参考PPT主题

   随存通位置：custom-theme

第二页PPT不必再添加页脚指令，其预览效果如下：

在这里插入图片描述

2.11 调整图片

如果当前页PPT中含有图片，比如下面的内容：

代码：

### 1.2 为VS Code安装Marp插件

相信VS Code不用做过多的介绍，搞过前端的同学都非常熟悉，我们就从为VS Code安装Marp插件开始，在为VS Code安装插件之前，我们先创建代码存放的文件，然后在VS Code中打开该文件夹作为我们的工作目录：

![open-file](images/open-file.png)



选择事先创建的文件夹：

![open-file-1](images/open-file-1.png)

PPT中的图片需要事先放到前面已经建立起的项目目录images文件夹中。

预览效果：

在这里插入图片描述

此时图片和文本内容显示不全，需要分割成2页PPT，并且调整图片的大小。

图片的MarkDown语法是：

![替代文本]（图片url）

可以在图片的替代文本中通过如下语法来调整图片大小：

![w:宽度像素 h:高度像素](url)  #也可以使用百分比

在设置图片时，建议优先设置图片宽度，高度会自动调整

Node

当前主题中使用的是16:9 PPT，宽度最大值为1920px，高度最大值为1080px

进行分割并适配图片后的代码：

### 1.2 为VS Code安装Marp插件

相信VS Code不用做过多的介绍，搞过前端的同学都非常熟悉，我们就从为VS Code安装Marp插件开始，在为VS Code安装插件之前，我们先创建代码存放的文件，然后在VS Code中打开该文件夹作为我们的工作目录：

![w:600](images/open-file.png)

---

选择事先创建的文件夹：

![w:1000](images/open-file-1.png)

预览效果：

在这里插入图片描述

说明：

这里第1张图片的宽度设置为600px，第2张图片为1000px，图片高度会自动调整

2.12 编写第2节分节PPT

接下来，我们编写第2节的分节PPT，我们这里的分节PPT不需要页脚内容，我们需要在这里去掉页脚，然后在后面的PPT中再把页脚填上。

代码：

## 2 开始编写PPT
<!--  footer: '' -->

预览效果：

在这里插入图片描述

2.13 编写第2节内容PPT

代码：

### 2.1 准备素材和文件夹
<!--  footer: '版权所有     北京软通动力教育科技有限公司' -->
在项目存放文件夹code-4-ppt下创建images文件夹用于存放ppt内容中用到的图片素材资料。并将制作相关图片拷贝到此处。

在第一步，选择code-4-ppt处，在第二步点击新建文件夹按钮

![w:1200](images/make-images.png)



### 2.2 创建markdown文档

和上一步类似，在code-4-ppt目录中点击创建文件按钮，建立名为的《用代码玩转PPT.md》markdown文档，注意扩展名为md。
![code-ppt](images/code-ppt.png)

我们这里的md文档就相当于最终导出PPT的源码，我们完成md文档的编写，并随时通过marp插件预览，编写完成后将通过marp插件导出为pptx格式，也就完成了我们的PPT制作过程。

说明：

  • 标题为《2.1 准备素材和文件夹》的PPT首先重新设置了页脚（由于上一页PPT取消了页脚），并设置了图片的宽度为1200px、
  • 标题为《2.2 创建markdown文档》的PPT刚好充满一页PPT的内容，因此没有做任何调整

预览效果：
在这里插入图片描述

2.14 编写总结页面

总结部分使用3号标题+列表即可，代码如下：

### 总结
1. 配置VS Code
2. PPT编写规则
3. PPT导出

效果预览：

在这里插入图片描述

2.15 编写致谢页面PPT

致谢页PPT编写比较简单，代码如下：

# THANK YOU
<!-- footer: '' -->

说明：

致谢内容一般使用1号标题，并且取消页脚。

效果预览：

在这里插入图片描述

至此，我们的PPT就全部完成了，接下来的步骤是将其导出成ppt格式。

3 导出PPT

3.1 导出pptx格式

我们可以利用marp插件将我们编写的内容导出可以演示的PPT。

Marp插件提供了导出能力，可以导出成以下格式：

  1. pptx
  2. html
  3. pdf
  4. png
  5. jpg

操作步骤，先单击marp图标，选择【export slide deck】，然后选择pptx格式，最后点击【export】按钮即开始导出操作。

在这里插入图片描述

在md所在文件夹下找到导出的ppt：

在这里插入图片描述

使用office软件查看导出效果：

在这里插入图片描述

注意：导出的所有PPT都以图片的形式存在，无法进行编辑，如需编辑要修改md文档后重新进行导出操作

总结

至此，我们用代码完成了ppt的制作，是不是很酷呢？你现在就可以动手试一试。

参考资料

marp官网帮助文档：https://marpit.marp.app/directives

极客风---尝试用代码做一份演示文稿吧
咸鱼咸的博客
06-18 1344
让写演示文稿也能有极客范！
Python 自动化办公-玩转 PPT
somenzz的博客
08-06 529
如果你有一堆 PPT 要做，他们的格式是一样的，只是填充的内容不一样，那你就可以使用 Python 来减轻你的负担。PPT 分为内容和格式，用 Python 操作 PPT，就是利用 Pyt...
代码生成PPT（C#）
08-18
采用C#代码自动实现PPT，包括对文字、图片、图表的生成。
开源利器：PPTX2MD 项目推荐
最新发布
gitblog_00343的博客
03-27 250
开源利器：PPTX2MD 项目推荐 pptx2md a pptx to markdown converter 项目地址: https://gitcode.com/gh_mirrors/pp/pptx2md ...
领导让我做 PPT，我用代码来生成
IT界那些事儿
05-07 977
我们使用 puppeteer 抓取了大学的信息，用 SSE 的方式创建了接口，不断返回爬取到的数据。然后用 pptxgen 来生成了 ppt。这样，400 多张 PPT 瞬间就生成了，不用自己手动搞。
代码敲累了就来看看《PPT制作经验分享-发布版PPT》
dkjkls的博客
01-09 3940
版权声明：本文为博主原创文章，未经博主允许不得转载。 博主的《PPT制作经验分享-发布版PPT》话不多说，直接上PPT。 博主目前是一名刚出道不久的底层码农 在本科及研究生阶段一直从事宣传方面的工作，多种形式的宣传手段都涉及制作过 三个问题 演讲型的PPT作用是辅助演讲者进行表达的，所以在幻灯片上的字相对来说会比较少，甚至没有。 而阅读型的PPT作用则是向阅读这份PPT的人
代码大全PPT
02-20
本人编写的代码大全讲义
代码玩转PPT第02章：custom-theme主题下载及使用指南
3. 描述解读：根据描述，“教你用代码玩转ppt第02章用代码玩转PPT扩展资料”表明这是一个关于PPT制作的教程的扩展资源包，专门用于第二章的内容。该文件包含了实现代码级PPT定制的所有必要资源，例如CSS样式文件和...
《40天玩转移动营销》-@Mr蔬菜-秋叶PPT.pptx
08-06
为了帮助企业有效运用移动营销策略，美国两位营销专家雷切尔·帕斯卡和诺亚·埃尔金合著了《40天玩转移动营销》一书。该书不仅获得了营销领域专家的高度评价，而且对不同层次的营销人员提供了极高的指导价值。 移动...
答辩ppt440玩转保定旅游系统.pptx
08-28
本PPT主要介绍了玩转保定旅游系统的设计和实现，系统使用Java和Mysql数据库作为开发技术，实现了一个基于Web的旅游系统。该系统的设计目标是提供一个高效、准确、完善的旅游信息管理系统，解决传统的手工统计方式的...
软件需求分析课件：Chap 11-Iteration 3--More Topics.ppt
06-14
综上所述，软件需求分析课件中的“Chap 11-Iteration 3--More Topics.ppt”涵盖了迭代3中的中级主题，包括更深入的设计模式应用、架构分析、过程建模以及泛化和特化概念。通过这些知识的学习，开发者可以更有效地...
代码ppt模板
07-21
很乐意为大家分享本次代码ppt模板，希望大家能够很好利用
代码规范ppt
12-19
代码规范ppt
javascript代码讲解ppt
09-24
javascript有深入了解
代码生成原理浅析PPT
04-21
本文档是无垠式代码生成器研发阶段的理论探讨过程，对理解无垠式代码生成器源码和和平之翼代码生成器这两种动词算子式代码生成器是很重要的。
matlab代码讲解 ppt,详解MATLAB在科学计算中的应用（含源码及教程PPT等）
weixin_32424555的博客
03-18 342
详解MATLAB在科学计算中的应用本教程由两部分组成，分别是技术讲解部分和案例讲解部分，本教程含有案例源码、PPT等，其中技术讲解部分如下：第1章 MATLAB概述第1章 MATLAB的工具箱第2章 MATLAB语言程序设计第3章 误差理论第4章 非线性方程(组)的求解第5章 线性方程组的求解第6章 插值第7章 函数逼近与数据拟合第8章 数值积分与数值微分第9章 偏微分方程问题...
Python纯代码pdf批量快速转换成ppt
weixin_46426157的博客
08-19 5184
pdf2ppt 快速轻便的将pdf转换成ppt文件 引用https://github.com/phasedOut/pdf2pptx 做的jpg合并成ppt 引用https://www.cnblogs.com/loveprogramme/p/11247037.html 做的pdf切割成jpg github地址：https://github.com/Derekchen147/pdf2ppt 目录 jpgs：保存分割出来的jpg result：保存最终生成的ppt source_files：保存想要转变成ppt
利用Python自动生成PPT的示例详解
weixin_72959097的博客
04-08 2632
在日常工作中，PPT制作是常见的工作，如果制作创意类PPT，则无法通过自动化的形式生成，因为创意本身具有随机性，而自动化解决的是重复性工作，两者有所冲突。python-pptx是python处理PPT的一个库，注重的是读和写，无法导出，没有渲染功能。ppt里面处理的主要对象一般为文本框，表格，图片。
pycharm无法加载conda虚拟环境
01-24
### 解决PyCharm无法加载Conda虚拟环境的方法 #### 配置设置 为了使 PyCharm 能够成功识别并使用 Conda 创建的虚拟环境，需确保 Anaconda 的路径已正确添加至系统的环境变量中[^1]。这一步骤至关重要，因为只有当 Python 解释器及其关联工具被加入 PATH 后，IDE 才能顺利找到它们。 对于 Windows 用户而言，在安装 Anaconda 时，默认情况下会询问是否将它添加到系统路径里；如果当时选择了否，则现在应该手动完成此操作。具体做法是在“高级系统设置”的“环境变量”选项内编辑 `Path` 变量，追加 Anaconda 安装目录下的 Scripts 文件夹位置。 另外，建议每次新建项目前都通过命令行先激活目标 conda env： ```bash conda activate myenvname ``` 接着再启动 IDE 进入工作区，这样有助于减少兼容性方面的问题发生概率。 #### 常见错误及修复方法 ##### 错误一：未发现任何解释器 症状表现为打开 PyCharm 新建工程向导页面找不到由 Conda 构建出来的 interpreter 列表项。此时应前往 Preferences/Settings -> Project:...->Python Interpreter 下方点击齿轮图标选择 Add...按钮来指定自定义的位置。按照提示浏览定位到对应版本 python.exe 的绝对地址即可解决问题。 ##### 错误二：权限不足导致 DLL 加载失败 有时即使指定了正确的解释器路径，仍可能遇到由于缺乏适当的操作系统级许可而引发的功能缺失现象。特别是涉及到调用某些特定类型的动态链接库 (Dynamic Link Library, .dll) 时尤为明显。因此拥有管理员身份执行相关动作显得尤为重要——无论是从终端还是图形界面触发创建新 venv 流程均如此处理能够有效规避此类隐患。 ##### 错误三：网络连接异常引起依赖下载超时 部分开发者反馈过因网速慢或者其他因素造成 pip install 操作中途断开进而影响整个项目的初始化进度条卡住的情况。对此可尝试调整镜像源加速获取速度或是离线模式预先准备好所需资源包后再继续后续步骤。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值