目录
-
1. 指令
- 1.1 指令的使用方法
- 1.2 指令类型
- 1.3 标题分隔符
- 1.4 页码
- 1.5 页眉和页脚
- 3. 主题风格
-
4. 图片语法
- 4.1 调整图片大小
- 4.2 图片滤镜
- 4.3 幻灯片背景
- 4.4 高级背景
- 5. 参考资料
- 6. 相关推文
-
相关课程
- 免费公开课
- 最新课程-直播课
- 关于我们
Marp 幻灯片系列：
- 用Markdown制作幻灯片-五分钟学会Marp（上篇）-M110a
- 用Markdown制作幻灯片-五分钟学会Marp（下篇）-M110b
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 -->
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 连享会### 作者：宋森安(西南财经大学); 张家豪(西北大学)
注释：“ 用于自动调整标题（一级标题）大小，以适应幻灯片大小。
Default 主题风格的演示效果如下：
将 更换为，幻灯片演示风格就变成下图：
可以发现，在 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
- 专题：Markdown* Markdown：五分钟Markdown教程
- Markdown教程之LaTeX数学公式简介
- Markdown：一键将-Word-转换为-Markdown
- Markdown-图床
- Markdown常用LaTex数学公式
- 连玉君Markdown笔记
- Markdown中书写LaTeX数学公式简介
- 在 Markdown 中使用表情符号
- 在 Markdown 中使用表情符号
- mdnice.cn——Markdown、知乎、公众号排版神器
- 两种网页转Markdown的简便方法
- 专题：工具软件* 学术论文写作新武器：Markdown-上篇
- 学术论文写作新武器：Markdown-中篇
- 学术论文写作新武器：Markdown-下篇
- 毕业季10分钟Markdown简历——风格瞬间变
暂无评论内容