用Markdown制作幻灯片-五分钟学会Marp（下篇）-M110b
温馨提示： 定期 清理浏览器缓存，可以获得最佳浏览体验。
New！
lianxh命令发布了：
随时搜索推文、Stata 资源。安装：
. ssc install lianxh
详情参见帮助文件 (有惊喜)：
. help lianxh
⛳ Stata 系列推文：
全部 | Stata入门 | Stata教程 | Stata资源 | Stata命令 计量专题 | 论文写作 | 数据分享 | 专题课程 结果输出 | Stata绘图 | 数据处理 | Stata程序 回归分析 | 面板数据 | 交乘项-调节 | IV-GMM 内生性-因果推断 | 倍分法DID | 断点回归RDD | PSM-Matching | 合成控制法 Probit-Logit | 时间序列 | 空间计量 | 分位数回归 | 生存分析 | SFA-DEA 文本分析-爬虫 | Python-R-Matlab | 机器学习 Markdown | 工具软件 | 其它
作者：宋森安（西南财经大学）；张家豪（西北大学）；连玉君（中山大学）
邮箱: songsean@88.com
目录
Marp 幻灯片系列：
1. 指令
在上一期推文（基础篇）中，我们介绍了如何用「 VS Code + Marp 」将 Markdown 文档转为幻灯片。然而，仅靠 Markdown 制作出的幻灯片格式可能会比较单调。为了制作出更加漂亮的幻灯片，我们还需要学习一种被称之为 指令（Directives） 的扩展语法。例如，指令 theme 可改变幻灯片的主题，paginate 可显示出幻灯片的页码，footer 用于设置幻灯片的页脚内容， size 可调整幻灯片的大小， backgroundColor 用于变换幻灯片的背景颜色等。
特别说明：本文的演示代码来自 Marp 官网 、开发者 Yuki Hattori 的博客 以及连玉君老师的 Markdown 仓库 https://gitee.com/arlionn/md 。
1.1 指令的使用方法
那么，如何使用这些指令呢？
Marp 提供两种使用方法：
HTML comment
这种需要在
theme等指令前后添加<!-- -->。<!-- theme: default paginate: true -->Front-matter
第二种则是直接写在 Markdown 文档的开头（就是将指令和
marp: ture写一块），此时无须再添加<!-- -->。--- marp: ture theme: default paginate: true ---
1.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.
对比上下两图，可以明显地看出两者之间的差异。
1.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
1.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.
1.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 文档改动自 连玉君老师的幻灯片，其演示效果如下图：
3. 主题风格
目前，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 主题风格演示效果如下：
4. 图片语法
图片语法句式为 。其中，[keywords] 用于设置幻灯片的尺寸、颜色等参数，(image.jpg)是图片地址。
4.1 调整图片大小
在[keywords]中添加 width 、 height 等关键词调整图片的大小。
 <!-- Setting width to 200px -->
 <!-- Setting height to 300px -->
 <!-- Setting both lengths -->
这里也可以使用关键词的缩写 w 和 h ：
 <!-- Setting size to 32x32 px -->
4.2 图片滤镜
Marp 还支持将 CSS filters 应用于图片语法，替换[keywords]中的内容，可对图片进行渲染。例如，![blur:10px]()、![brightness:1.5]() 、 ![contrast:200%]()、![saturate:2.0]()、![sepia:1.0]()等指令。当省略括号内的参数时，软件会直接使用默认参数。
当然，我们可以将多个滤镜应用于图片。
例如，笔者使用 ，原图就被渲染成深褐色。
4.3 幻灯片背景
关键词 bg 可设置幻灯片的背景，具体句式为：。
此外，我们可在 bg 后添加关键词选项，用于调整背景图片的尺寸。
例如，（缩放图像以填充幻灯片，这也是默认图片设置） 、  （缩放图像以适应幻灯片） 、 （不缩放图像，并使用原始大小） 、 （按照指定百分比缩放）。
4.4 高级背景
我们还可以通过高级背景来实现多重背景、背景拆分，甚至通过图片滤镜来设置幻灯片背景。
注释：背景图片由网站 fakeimg.pl 自动生成的假图片，改变
text=后的内容，图片文字随之改变。
多重背景图的演示效果如下：
在 bg 后加入 vertical 后，背景图片就会垂直排列，幻灯片演示效果如下图：
在 bg 右侧添加 left 或 right 可设置背景图的位置。添加 left 或 right 后，幻灯片内容所占的空间也会减小一半。
---
marp: true
---
<!-- color: black-->
# 欢迎报考 西北大学
拆分背景的演示效果如下图：
我们也可以将多张图片固定在一侧。
文本信息如下：
---
marp: true
---
<!-- color: black-->
# 欢迎报考
## 西北大学、西南财经大学
幻灯片演示效果如下图：
除了通过图片设置背景外，Marp 也支持设定颜色参数来改变幻灯片背景。背景颜色的基本句式为  ，文字颜色的基本句式为 。如下图所示：
5. 参考资料
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 仓库
6. 相关推文
Note：产生如下推文列表的 Stata 命令为：
lianxh Markdown
安装最新版lianxh命令：
ssc install lianxh, replace
相关课程
免费公开课
直击面板数据模型 - 连玉君，时长：1小时40分钟，课程主页 Stata 33 讲 - 连玉君, 每讲 15 分钟. Stata 小白的取经之路 - 龙志能，时长：2 小时，课程主页 部分直播课 课程资料下载 (PPT，dofiles等)
最新课程-直播课
| 专题 | 嘉宾 | 直播/回看视频 |
|---|---|---|
| ⭐ 最新专题 | 文本分析、机器学习、效率专题、生存分析等 | |
| 研究设计 | 连玉君 | 我的特斯拉-实证研究设计，-幻灯片- |
| 面板模型 | 连玉君 | 动态面板模型，-幻灯片- |
| 面板模型 | 连玉君 | 直击面板数据模型 [免费公开课，2小时] |
Note: 部分课程的资料，PPT 等可以前往 连享会-直播课 主页查看，下载。
⛳ 课程主页
⛳ 课程主页
关于我们
Stata连享会 由中山大学连玉君老师团队创办，定期分享实证分析经验。 连享会-主页 和 知乎专栏，400+ 推文，实证分析不再抓狂。直播间 有很多视频课程，可以随时观看。 公众号关键词搜索/回复 功能已经上线。大家可以在公众号左下角点击键盘图标，输入简要关键词，以便快速呈现历史推文，获取工具软件和数据下载。常见关键词： 课程, 直播, 视频, 客服, 模型设定, 研究设计, stata, plus, 绘图, 编程, 面板, 论文重现, 可视化, RDD, DID, PSM, 合成控制法等
连享会小程序：扫一扫，看推文，看视频……
扫码加入连享会微信群，提问交流更方便
✏ 连享会-常见问题解答：
✨ https://gitee.com/lianxh/Course/wikis
New！
lianxh命令发布了：
随时搜索连享会推文、Stata 资源，安装命令如下：
. ssc install lianxh
使用详情参见帮助文件 (有惊喜)：
. help lianxh
热门资讯
