02-用代码玩转PPT

用代码玩转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 */

2. headingDivider: [1,2,3,4,5,6]指定了md文档中作为每页幻灯片分隔的标记，这里是一个数组，表示在H1~H6号标题前面自动分隔为一页新的PPT
3. 如果没有指定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