用Markdown制作幻灯片:Marp
特别鸣谢
本文对以下链接进行了整理：
- 用Markdown制作幻灯片-五分钟学会Marp（上篇）-M110a| 连享会主页 (lianxh.cn)
- 用Markdown制作幻灯片-五分钟学会Marp（下篇）-M110b| 连享会主页 (lianxh.cn)
- 【教程】你在用 Marp 时可能会用的语法 ——litble – MiNa!
1.前言
在 Microsoft PowerPoint 里面，我们需要调整幻灯片的格式，操作起来些许麻烦。幻灯片通常是辅助演讲者的一个工具，这也是说，幻灯片不需要制作太复杂，简洁美观即可
Markdown 文字排版高效，且风格简洁美观，是许多写作者的不二之选。而多数场景中， Markdown 的这种特点对幻灯片的制作也很合适。
那么，我们是否可以使用 Markdown 高效地制作一个漂亮的幻灯片？
答案就是：makedown + marp（based on vscode)
注：
- 基于Markdown语法,复制黏贴笔记—->ppt/pdf/html/png
- PPT 里面需要的各种文字效果可以用html,css,js等解决
- 可以用 latex直接写数学公式
- 可以画表格等(markdown 语法)
- 可以直接插入 Emoji
- 在弹出保存页面时，可以自己选保存的格式
2.下载与安装
vscode的安装方式
在VS Code下载插件：marp for VS code 和 markdown all in one
其他安装方式
还可以通过npm 安装 marp,读者可以自行探索
（不过在生成相关文件时，需要做一些命令行，vscode版的基本通过图形界面就可以解决）
3.操作流程
3.1 新建文件
打开 VS Code ，点击文件->新建文件，将其存为 .md 文件。此时，我们就创建好一个 Markdown 文档。
3.2 幻灯片分页
首先，我们需要在 Markdown 文档开头标记 marp: true，以启用 Marp 功能。也就是告诉编辑器，你要制作的是幻灯片（Slide）。
需要说明的有两点：
- 其一，
marp: true语句中的冒号为半角模式下录入的；上下的---不可省略； - 其二，新建的 Markdown 文档也可以不做上述标记，通过点击菜单条中的 Marp 图标即可自动添加。具体步骤为：依次点击
Marp 图标→Toggle Marp feature for current Markdown ( markdown.marp.toggleMarpFeature )，软件会自动在文档开头添加marp: true。如下图所示：
文字信息如下：
---
marp: true
---# Your slide deck
Start writing!幻灯片通常有多个页面，那么该如何分页？
Markdown 通常用---作为水平分割线，而 Marp 则用 --- 表示「分页符」，即用以「分割幻灯片」（Slide）。
演示效果如下：
3.3 幻灯片预览
点击 Marp 图标的右侧，我们就可以在 VS Code 编辑器的右侧实时预览幻灯片。
3.4 导出幻灯片
点击 Marp 图标-> Export slide deck ....( markdown.marp.export )即可导出文件。
目前，Marp 可导出四种格式的文件：
- HTML
- PPTX (幻灯片)
- PNG (仅限于幻灯片的第一页)
- JPEG (仅限于幻灯片的第一页)
需要注意的是：
- 导出 HTML 格式的文档不需要安装任何插件，也可以很方便地转换为 PDF 格式。
- HTML 格式的幻灯片双击即可用默认浏览器打开，亦可右击文件，选择特定的浏览器打开 (建议用 Google 浏览器打开)。
- 展示时建议采用全屏播放模式：按快捷键 F11 即可；再次按下 F11 即可退出全屏。
- 用 Google 浏览器打开后，按快捷键 Ctrl+P，并选择「另存为 PDF」，即可把 HTML 格式的幻灯片转换为 PDF 格式。
- 若需导出 PDF 和 PPTX 格式，可能需要安装
pandoc
4.指令
仅靠 Markdown 制作出的幻灯片格式可能会比较单调。为了制作出更加漂亮的幻灯片，我们还需要学习一种被称之为 指令（Directives） 的扩展语法。例如，指令 theme 可改变幻灯片的主题，paginate 可显示出幻灯片的页码，footer 用于设置幻灯片的页脚内容， size 可调整幻灯片的大小， backgroundColor 用于变换幻灯片的背景颜色等。
4.1 指令的使用方法
那么，如何使用这些指令呢？
Marp 提供两种使用方法：
HTML comment
这种需要在 theme 等指令前后添加<!-- -->。
<!--
theme: default
paginate: true
-->Front-matter
第二种则是直接写在 Markdown 文档的开头（就是将指令和 marp: ture 写一块），此时无须再添加<!-- -->。
---
marp: ture
theme: default
paginate: true
---4.2 指令类型
指令类型（ Type of directives ）可分为全局指令（ Global directives ）和局部指令（ Local directives ），有点类似于 Stata 中的宏。
其中，全局指令是整个幻灯片设定值，例如 theme、headingDivider、style。在全局指令前面添加前缀 $，就可以实现对整个幻灯片的设定。
而局部指令用以设置当前幻灯片页面以及后续页面。例如，我们用<!-- backgroundColor: aqua --> 设置幻灯片的背景颜色。
<!-- backgroundColor: aqua -->
This page has aqua background.
---
The second page also has same color.幻灯片演示效果如下：
当然，如果您只想将局部指令应用于当前页面，则需要指令前添加前缀 _ 。
<!-- _backgroundColor: aqua -->
Add underscore prefix `_` to the name of local directives.
---
The second page would not apply setting of directives.对比上下两图，可以明显地看出两者之间的差异。
4.3 标题分隔符
除了页面分割符---，如果文章结构比较清晰，我们还可以使用全局指令 headingDivider 分隔幻灯片页面。换句话说，就是 headingDivider 通过识别 Markdown 文档的标题来实现幻灯片分页。
例如，下面两个 Markdown 文档具有相同的输出。
一般语法如下：
# 1st page
The content of 1st page
---
## 2nd page### The content of 2nd page
Hello, world!
---
# 3rd page
Thanks Heading Divider 如下：
<!-- headingDivider: 2 --># 1st page
The content of 1st page
## 2nd page### The content of 2nd page
Hello, world!
# 3rd page
Thanks 个人认为用处不大
4.4 页码
局部命令 paginate 用于显示幻灯片的页码。
<!-- paginate: true -->
You would be able to see a page number of slide in the lower right.当然，如果我们不想在标题页面出现页码，只需将指令 paginate 移到第二页即可。
# Title slide
This page will not paginate by lack of `paginate` local directive.
---
<!-- paginate: true -->
It will paginate slide from a this page.添加页码：<!-- page_number: true -->，取消页码：<!-- page_number:false -->，这个也是，加*表示只对某一页操作
4.5 页眉和页脚
当需要在多张幻灯片中显示相同的页眉或页脚时，可将局部指令 header或 footer 写在 Markdown 文档的最前面。
---
marp: true
header: 'Stata连享会'
footer: 连享会 · [直播间](http://lianxh.duanshu.com)   |   lianxh.cn   |   [课程主页](https://lianxh.duanshu.com/#/brief/course/c3f79a0395a84d2f868d3502c348eafc)   |   [课程展示](https://gitee.com/arlionn/p101)
---
# VS Code + Marp : 用 Markdown 制作幻灯片##### 作者:宋森安 (西南财经大学)；张家豪(西北大学)##### 邮箱: songsean@88.com
---
### 文章目录
- #### 一、前言
- #### 二、下载与安装
- #### 三、操作教程
- #### 四、讨论
- #### 五、参考资料
- #### 六、相关推文上述 Markdown 文档改动自 连玉君老师的幻灯片，其演示效果如下图：
添加页脚：<!-- footer: 页脚内容 -->，如果写为<!-- *footer: 页脚内容 -->，就是仅本页添加页脚。<!-- footer: --> 就相当于取消页脚
4.6页面大小
写上类似这种：<!-- $size: 16:9 -->，可以调节 PPT 尺寸。
4.7 summary
下面是我的日常使用
---
marp: true
# 主题
theme: nord
# 标题
title: 我是标题
# 页码，出现在右下角
paginate: True
# 版本
version: 1.0.0
# 页脚
footer: 我是页脚
# 页眉
header: 我是页眉
# 大小，也可以写16:9
size: 4K
# 类别,原理应该就是样式的叠加，这部分我不太清楚，读者可以自行探索
class:5. 主题风格
简单演示
目前，Marp 提供 Default (书页黄)、Gaia(海蓝) 和 uncover 三种主题风格。
下面笔者简单演示这三种主题风格：
---
marp: true
---
<!-- theme: Default-->
## <!-- fit -->
VS Code + Marp: 用 Markdown 制作幻灯片
### 来源：Stata 连享会
### 作者：宋森安(西南财经大学); 张家豪(西北大学)注释：
<!-- fit -->用于自动调整标题（一级标题）大小，以适应幻灯片大小。
Default 主题风格的演示效果如下：
将<!-- theme: Default-->更换为<!-- theme: Gaia-->，幻灯片演示风格就变成下图：
可以发现，在 Gaia 主题背景下，幻灯片的内容会对齐到左上方。但是我们可以使用 class: lead 来改变。
<!--
theme: gaia
class: lead
-->添加 class: lead 后，幻灯片的演示效果如下：
Uncover 主题风格演示效果如下：
添加新的主题
在./vscode/settings.json中，把css主题样式文件加入路径：
{
"markdown.marp.themes": [
"https://tapioca24.github.io/marp-themes/tapioca24.css"
]
}路径可以是网络地址，也可以是本地地址（最好是你的marp项目所在地址
使用主题
引用一种主题：<!-- $theme: gaia -->
在使用了 gaia 主题后，写上：<!-- template: invert --> 后，所有 PPT 默认使用 invert 背景色。
在某一页写上<!-- *template: invert --> 后，仅这一页 PPT 用 invert（*就是仅这一页使用的意思）。
或者直接在header，使用指令直接指定全局主题。（可通过指定某一页的主题来屏蔽全局主题）
---
marp: true
theme: tapioca24
---6. 图片语法
图片语法句式为 。其中，[keywords] 用于设置幻灯片的尺寸、颜色等参数，(image.jpg)是图片地址。
插入图片的语法： 路径可以是本机路径也可以是http路径
6.1 调整图片大小
在[keywords]中添加 width 、 height 等关键词调整图片的大小。
 <!-- Setting width to 200px -->
 <!-- Setting height to 300px -->
 <!-- Setting both lengths -->这里也可以使用关键词的缩写 w 和 h ：
 <!-- Setting size to 32x32 px --> ：图片缩放后插入 PPT 中
6.2 图片滤镜
Marp 还支持将 CSS filters 应用于图片语法，替换[keywords]中的内容，可对图片进行渲染。例如，![blur:10px]()、![brightness:1.5]() 、 ![contrast:200%]()、![saturate:2.0]()、![sepia:1.0]()等指令。当省略括号内的参数时，软件会直接使用默认参数。
当然，我们可以将多个滤镜应用于图片。
例如，笔者使用 ，原图就被渲染成深褐色。
6.3 幻灯片背景
关键词 bg 可设置幻灯片的背景，具体句式为：。
此外，我们可在 bg 后添加关键词选项，用于调整背景图片的尺寸。
例如，（缩放图像以填充幻灯片，这也是默认图片设置） 、  （缩放图像以适应幻灯片） 、 （不缩放图像，并使用原始大小） 、 （按照指定百分比缩放）。
若一页 PPT 内插入多张背景图片，它们会并列分布
也可使用这样的语法定义幻灯片背景
<style scoped>
section{
background-image:url('./tju-images/tju1.png');
background-size:cover;
position: absolute;
}
</style>6.4 高级背景
我们还可以通过高级背景来实现多重背景、背景拆分，甚至通过图片滤镜来设置幻灯片背景。
注释：背景图片由网站 fakeimg.pl 自动生成的假图片，改变
text=后的内容，图片文字随之改变。
多重背景图的演示效果如下：
在 bg 后加入 vertical 后，背景图片就会垂直排列，幻灯片演示效果如下图：
在 bg 右侧添加 left 或 right 可设置背景图的位置。添加 left 或 right 后，幻灯片内容所占的空间也会减小一半。
---
marp: true
---
<!-- color: black--># 欢迎报考 西北大学拆分背景的演示效果如下图：
我们也可以将多张图片固定在一侧。
文本信息如下：
---
marp: true
---
<!-- color: black--># 欢迎报考 ## 西北大学、西南财经大学幻灯片演示效果如下图：
除了通过图片设置背景外，Marp 也支持设定颜色参数来改变幻灯片背景。背景颜色的基本句式为  ，文字颜色的基本句式为 。如下图所示：
7.一些技巧
from tapioca24
There are several utility classes that can be used to enrich the presentation of slides.
Class | Description |
|---|---|
text-center | Align all content to the center. |
text-<size> | Increase the font size. The size can be specified in intervals of 25 from 125 to 1000. |
Give the class to only the desired page by writing the following in the slide.
<!-- _class: text-center text-125 -->参考资料
- Marp：用 Markdown「写」PPT 的新选择 - 少数派 (sspai.com)
- Marpit: Markdown slide deck framework
- Marp: Markdown Presentation Ecosystem
- Marp for VS Code - Visual Studio Marketplace
- GitHub - Marp for VS Code: Create slide deck written in Marp Markdown on VS Code
- fakeimg.pl
- 连享会 Markdown 仓库