用Markdown制作幻灯片-五分钟学会Marp(下篇)-M110b

发布时间:2021-06-17 阅读 6865

Stata连享会   主页 || 视频 || 推文 || 知乎

温馨提示: 定期 清理浏览器缓存,可以获得最佳浏览体验。

New! lianxh 命令发布了:
随时搜索推文、Stata 资源。安装:
. ssc install lianxh
详情参见帮助文件 (有惊喜):
. help lianxh

课程详情 https://gitee.com/lianxh/Course

课程主页 https://gitee.com/lianxh/Course

⛳ Stata 系列推文:

PDF下载 - 推文合集

作者:宋森安(西南财经大学);张家豪(西北大学);连玉君(中山大学)

邮箱: 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 中的宏。

其中,全局指令是整个幻灯片设定值,例如 themeheadingDividerstyle。在全局指令前面添加前缀 $,就可以实现对整个幻灯片的设定。

而局部指令用以设置当前幻灯片页面以及后续页面。例如,我们用<!-- 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 页眉和页脚

当需要在多张幻灯片中显示相同的页眉或页脚时,可将局部指令 headerfooter 写在 Markdown 文档的最前面。

---

marp: true
header: 'Stata连享会'
footer: 连享会 · [直播间](http://lianxh.duanshu.com) &emsp;  | &emsp;  lianxh.cn &emsp; | &emsp;  [课程主页](https://lianxh.duanshu.com/#/brief/course/c3f79a0395a84d2f868d3502c348eafc) &emsp; | &emsp;  [课程展示](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. 图片语法

图片语法句式为 ![](image.jpg)。其中,[keywords] 用于设置幻灯片的尺寸、颜色等参数,(image.jpg)是图片地址。

4.1 调整图片大小

[keywords]中添加 widthheight 等关键词调整图片的大小。

![width:200px](image.jpg) <!-- Setting width to 200px -->
![height:30cm](image.jpg) <!-- Setting height to 300px -->
![width:200px height:30cm](image.jpg) <!-- Setting both lengths -->

这里也可以使用关键词的缩写 wh

![w:32 h:32](image.jpg) <!-- Setting size to 32x32 px -->

4.2 图片滤镜

Marp 还支持将 CSS filters 应用于图片语法,替换[keywords]中的内容,可对图片进行渲染。例如,![blur:10px]()![brightness:1.5]()![contrast:200%]()![saturate:2.0]()![sepia:1.0]()等指令。当省略括号内的参数时,软件会直接使用默认参数。

当然,我们可以将多个滤镜应用于图片。

![brightness:.8 sepia:50%](https://fig-lianxh.oss-cn-shenzhen.aliyuncs.com/Marp%E5%88%9B%E5%BB%BA%E5%B9%BB%E7%81%AF%E7%89%87_Fig20_%20%E8%A5%BF%E5%8D%97%E8%B4%A2%E7%BB%8F%E5%A4%A7%E5%AD%A6_%E5%AE%8B%E6%A3%AE%E5%AE%89.jpg)

例如,笔者使用 ![brightness:.8 sepia:50%](https://example.com/image.jpg),原图就被渲染成深褐色。

4.3 幻灯片背景

关键词 bg 可设置幻灯片的背景,具体句式为:![bg](https://example.com/background.jpg)

此外,我们可在 bg 后添加关键词选项,用于调整背景图片的尺寸。

例如,![bg cover](image.jpg)(缩放图像以填充幻灯片,这也是默认图片设置) 、 ![bg contain](image.jpg) (缩放图像以适应幻灯片) 、 ![bg auto](image.jpg)(不缩放图像,并使用原始大小) 、 ![bg 150%](image.jpg)(按照指定百分比缩放)。

4.4 高级背景

我们还可以通过高级背景来实现多重背景、背景拆分,甚至通过图片滤镜来设置幻灯片背景。

![bg](https://fakeimg.pl/800x600/0288d1/fff/?text=A)
![bg](https://fakeimg.pl/800x600/02669d/fff/?text=B)
![bg](https://fakeimg.pl/800x600/67b8e3/fff/?text=C)

注释:背景图片由网站 fakeimg.pl 自动生成的假图片,改变 text= 后的内容,图片文字随之改变。

多重背景图的演示效果如下:

![bg vertical](https://fakeimg.pl/800x600/0288d1/fff/?text=A)
![bg](https://fakeimg.pl/800x600/02669d/fff/?text=B)
![bg](https://fakeimg.pl/800x600/67b8e3/fff/?text=C)

bg 后加入 vertical 后,背景图片就会垂直排列,幻灯片演示效果如下图:

bg 右侧添加 leftright 可设置背景图的位置。添加 leftright 后,幻灯片内容所占的空间也会减小一半。

---
marp: true
---
![bg left](https://fig-lianxh.oss-cn-shenzhen.aliyuncs.com/Marp%E5%88%9B%E5%BB%BA%E5%B9%BB%E7%81%AF%E7%89%87_Fig20_%20%E8%A5%BF%E5%8D%97%E8%B4%A2%E7%BB%8F%E5%A4%A7%E5%AD%A6_%E5%AE%8B%E6%A3%AE%E5%AE%89.jpg)

<!-- color: black--> 
# 欢迎报考 西北大学

拆分背景的演示效果如下图:

我们也可以将多张图片固定在一侧。

文本信息如下:

---
marp: true
---
![bg right](https://fig-lianxh.oss-cn-shenzhen.aliyuncs.com/Marp%E5%88%9B%E5%BB%BA%E5%B9%BB%E7%81%AF%E7%89%87_Fig20_%20%E8%A5%BF%E5%8D%97%E8%B4%A2%E7%BB%8F%E5%A4%A7%E5%AD%A6_%E5%AE%8B%E6%A3%AE%E5%AE%89.jpg)

![bg](https://fig-lianxh.oss-cn-shenzhen.aliyuncs.com/Marp%E5%88%9B%E5%BB%BA%E5%B9%BB%E7%81%AF%E7%89%87_Fig20_%20%E8%A5%BF%E5%8D%97%E8%B4%A2%E7%BB%8F%E5%A4%A7%E5%AD%A6_%E5%AE%8B%E6%A3%AE%E5%AE%89.jpg)

<!-- color: black--> 
# 欢迎报考 
##  西北大学、西南财经大学

幻灯片演示效果如下图:

除了通过图片设置背景外,Marp 也支持设定颜色参数来改变幻灯片背景。背景颜色的基本句式为 ![bg](颜色参数) ,文字颜色的基本句式为 ![](颜色参数)。如下图所示:

5. 参考资料

6. 相关推文

Note:产生如下推文列表的 Stata 命令为:
lianxh Markdown
安装最新版 lianxh 命令:
ssc install lianxh, replace

相关课程

免费公开课

最新课程-直播课

专题 嘉宾 直播/回看视频
最新专题 文本分析、机器学习、效率专题、生存分析等
研究设计 连玉君 我的特斯拉-实证研究设计-幻灯片-
面板模型 连玉君 动态面板模型-幻灯片-
面板模型 连玉君 直击面板数据模型 [免费公开课,2小时]
  • Note: 部分课程的资料,PPT 等可以前往 连享会-直播课 主页查看,下载。

课程主页

课程主页

关于我们

  • Stata连享会 由中山大学连玉君老师团队创办,定期分享实证分析经验。
  • 连享会-主页知乎专栏,400+ 推文,实证分析不再抓狂。直播间 有很多视频课程,可以随时观看。
  • 公众号关键词搜索/回复 功能已经上线。大家可以在公众号左下角点击键盘图标,输入简要关键词,以便快速呈现历史推文,获取工具软件和数据下载。常见关键词:课程, 直播, 视频, 客服, 模型设定, 研究设计, stata, plus, 绘图, 编程, 面板, 论文重现, 可视化, RDD, DID, PSM, 合成控制法

连享会小程序:扫一扫,看推文,看视频……

扫码加入连享会微信群,提问交流更方便

✏ 连享会-常见问题解答:
https://gitee.com/lianxh/Course/wikis

New! lianxh 命令发布了:
随时搜索连享会推文、Stata 资源,安装命令如下:
. ssc install lianxh
使用详情参见帮助文件 (有惊喜):
. help lianxh