| marp | size | theme | paginate | headingDivider | footer | ||
|---|---|---|---|---|---|---|---|
true |
58140 |
am_red |
true |
|
\ *初虹（虹鹄山庄）* *Awesome Marp：轻松取代 LaTeX Beamer！* *2024年1月13日（v1.3）* |
@初虹 公众号：虹鹄山庄 发布时间：2024 年 1 月 13 日（v1.3） [email protected] Awesome-Marp 地址：GitHub 库/Gitee 库
-
开始之前： 你需要知道这样几个工具，Markdown、Markdown 编辑器（VS Code 或 Obsidian）和 Marp。关于这三者是个啥，我不做详细地介绍，但在第 55 页-第 58 页会有一些凝练性的内容给你参考，同时我提供了不少的链接，也供你参阅。
-
为什么要开发 Awesome Marp？
- Marp 原生仅提供 3 种主题（
default/gaia/uncover），呈现效果一般。于是我根据自己的使用情况，边用边改造，陆续打磨了这样的一整套模板。 - 目前发布的 v1.3 有 38 个自定义样式、6 种颜色的主题（后面有呈现效果）
- Marp 原生仅提供 3 种主题（
-
Awesome Marp 的几个特色：
- 支持分栏呈现、支持 Callouts（类似于 Beamer 中的定理框）、提供多种类型的封面页和目录页、可以实现导航进度栏、图片支持自定义居中/居左/居右对齐等
-
用到的工具：软件 Visual Studio Code 或 Obsidian、Marp for VScode（插件）
- Awesome Marp 支持 38 个自定义样式，使用时需在页面指定（如
<!-- _class: trans -->）：
| 封面页 | 目录页 | 列表 | 引用盒子 | 其他 1 | 其他 2 |
|---|---|---|---|---|---|
cover_a |
toc_a |
cols-2 |
bq-black |
过渡页面 trans |
图表等的标题 caption |
cover_b |
toc_b |
cols-2-64 |
bq-purple |
最后一页 lastpage |
非嵌套无序列表的毛玻璃效果 fglass |
cover_c |
cols-2-73 |
bq-red |
导航栏 navbar |
脚注：footnote |
|
cover_d |
cols-3 |
bq-blue |
标题固定+无底色 fixedtitleA |
调节字体大小：tinytext/smalltext/largetext/hugetext |
|
cover_e |
cols-2-46 |
bq-green |
标题固定+有底色 fixedtitleB |
||
cols-2-37 |
两列有序列表 cols2_ol_sq/ci |
||||
rows-2 |
两列无序列表 cols_ul_sq/ci |
||||
pin-3 |
单列有序列表 col1_ul_sq/ci |
- Awesome Marp 的主题色（6 种），可在 YAML 区切换 Theme，如
theme: am_dark：
| 深色 | 绿色 | 红色 | 蓝色 | 棕色 | 紫色 |
|---|---|---|---|---|---|
am_dark |
am_green |
am_red |
am_blue |
am_brown |
am_purple |
-
如何使用：
- 搭配 VS Code：直接使用 VS Code 打开
Awesome-Marp文件夹- 如果你想「拿来即用」，直接根据我分享的 Markdown 源码文件，对照修改就好了~
- 如果你对部分效果不满意、期望简单微调的话，目前在
Awesome-Marp/themes下有 6 个 CSS 文件，这些 CSS 文件决定了 Markdown 源码的最终渲染效果，可以试着改一改~ - 如果你能够自行定制个性化 CSS 文件，渲染前，别忘在
Awesome-Marp/.vscode/settings.json里加上你的 CSS 文件路径~
- 搭配 Obsidian：安装 Marp Slides 插件，并配置相应 CSS 路径
- 搭配 VS Code：直接使用 VS Code 打开
-
字体：因担心版权问题，需自行下载字体并安装，Awesome Marp 用到的字体有：
- 正文字体：
Latin Modern Math、方正宋刻本秀楷简体，如果未安装，默认将使用Calibri和楷体 - 标题字体：
Optima LT Medium、方正苏新诗柳楷简体，如果未安装，默认将使用Arial和黑体 - 脚注字体：
Charm和叶根友毛笔行书修正版，如果未安装，默认将使用Calibri和楷体 - 代码字体：
Fira Code和霞鹜文楷等宽，如果未安装，默认将使用Consolas和华文中宋
- 正文字体：
- Awesome Marp v1.0：我开发了一整套 Marp 主题，Markdown 转换的 PPT 也可以很好看！
- Awesome Marp v1.1：标题行不随正文浮动，这下更像 Beamer 了！
- Awesome Marp v1.2：增加脚注、调节字体大小等样式～
- Awesome Marp v1.3：几处小更新～
-
大标题：采用一级标题
#（如：# Awesome Marp：自定义 Marp 主题） -
副标题：采用六级标题
######（如：###### 打造简便又不失个性的演示文稿） -
本套模板提供 5 种封面页样式，使用时需要在页面中设定局部指令，如：
<!-- _class: cover_a --> -
如果已经设定了全局 footer、header 或页码，但又不期望在封面页中出现，可以
<!-- _footer: "" -->/<!-- _header: "" -->/<!-- _paginate: "" -->分别将其局部隐藏起来 -
当标题文字超过页面宽度会溢出换行，这里可以使用
<!-- fit -->根据页面宽度自动调整文字大小
@初虹 公众号：虹鹄山庄 发布时间：2024 年 1 月 13 日（v1.3） [email protected] Awesome-Marp 地址：GitHub 库/Gitee 库
@初虹 公众号：虹鹄山庄 发布时间：2024 年 1 月 13 日（v1.3） [email protected] Awesome-Marp 地址：GitHub 库/Gitee 库
@初虹 公众号：虹鹄山庄 发布时间：2024 年 1 月 13 日（v1.3） [email protected] Awesome-Marp 地址：GitHub 库/Gitee 库
@初虹 公众号：虹鹄山庄 发布时间：2024 年 1 月 13 日（v1.3） [email protected] Awesome-Marp 地址：GitHub 库/Gitee 库
-
Awesome Marp 提供了至少 2 种目录页样式，使用时同样需要设定局部样式
toc_a：需要将 header 的内容设定为CONTENTS，即<!-- _header: "CONTENTS" -->toc_b：需要将 header 的内容设定为目录<br>CONTENTS<br>你的LOGO地址，即<!-- _header: 目录<br>CONTENTS<br>-->- 提供的几种分栏列表样式，也可以作为目录页使用，如
<!-- _class: cols2_ol_ci fglass -->（效果见这里）
-
类似地，如果已经定义了全局 footer 或页码，可以使用
<!-- _footer: "" -->/<!-- _paginate: "" -->分别将其局部隐藏起来
">https://mytuchuang-1303248785.cos.ap-beijing.myqcloud.com/picgo/202405291053273.png)-->
-
Awesome Marp 提供了 8 种页面分栏方式，分别为：
-
如果某一栏为图片，可以将
class=ldiv换成class=limg，这样能够实现图片的垂直居中对齐呢（class=ldiv为居上对齐）
- 以
<!-- _class: cols-2 -->为例，Markdown 的源码为：
<!-- _class: cols-2 -->
<div class=ldiv>
第一列（左侧栏）的内容在这里
内容可以是普通纯文本，可以是列表，也可以是引用块、链接、图片等
</div>
<div class=rdiv>
第二列（右侧栏）的内容在这里
</div>- 如果是分三栏（
<!-- _class: cols-3 -->），还需要再增加<div class="mdiv"></div>标签
曲曲折折的荷塘上面，弥望的是田田的叶子。叶子出水很高，像亭亭的舞女的裙。
层层的叶子中间，零星地点缀着些白花，有袅娜地开着的，有羞涩地打着朵儿的；正如一粒粒的明珠，又如碧天里的星星，又如刚出浴的美人。
微风过处，送来缕缕清香，仿佛远处高楼上渺茫的歌声似的。这时候叶子与花也有一丝的颤动，像闪电般，霎时传过荷塘的那边去了。
叶子本是肩并肩密密地挨着，这便宛然有了一道凝碧的波痕。叶子底下是脉脉的流水，遮住了，不能见一些颜色；而叶子却更见风致了。
—— 朱自清《荷塘月色》 返回
盼望着，盼望着，东风来了，春天的脚步近了。
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
—— 朱自清《春》
经典的散文诗篇有：
- 朱自清：《荷塘月色》
- 林清玄：《月到天心》
- 郁达夫：《古都的秋》
- 张爱玲：《花落的声音》
- 余光中：《听听那冷雨》
- 张抗抗：《牡丹的拒绝》
- 丰子恺：《杨柳》
- 周作人：《乌篷船》
- 郑振铎：《石湖》
- 梁实秋：《雅舍》
盼望着，盼望着，东风来了，春天的脚步近了。
一切都像刚睡醒的样子，欣欣然张开了眼。山朗润起来了，水涨起来了，太阳的脸红起来了。
小草偷偷地从土里钻出来，嫩嫩的，绿绿的。园子里，田野里，瞧去，一大片一大片满是的。坐着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。风轻悄悄的，草软绵绵的。
—— 朱自清《春》
经典的散文诗篇有：
- 朱自清：《荷塘月色》
- 林清玄：《月到天心》
- 郁达夫：《古都的秋》
- 张爱玲：《花落的声音》
- 余光中：《听听那冷雨》
- 张抗抗：《牡丹的拒绝》
- 丰子恺：《杨柳》
- 周作人：《乌篷船》
- 郑振铎：《石湖》
- 梁实秋：《雅舍》
四百年前，两位截然不同的科学家突破了当时已知世界的边界。1609 年在威尼斯，伽利略・伽利雷透过望远镜观察星辰，并制作仪器和进行实验。在布拉格，科班出身的神学家约翰内斯・开普勒发现了行星运动定律，奠定了近代天体物理学的基础，并思考着宇宙的宏伟构造。托马斯・德・帕多瓦以至今较少受到关注却扣人心弦的通信往来为基础，讲述了这两位类型如此迥异的学者之间不对等的关系，以及他们如何在同样的时刻却以各自的方式探索星辰的奥秘。在彼此的鉴照下，他们的远见与固执、睿智与无知得以呈现。这是一部介绍新科学的崛起以及近代来临之际的巨大变革的作品。 ——《宇宙的奥妙》
Awesome Marp v1.3 提供了 6 种列表分列的方式，分别为：
cols2_ol_sq：呈现效果为有序列表 + 方形序号cols2_ol_ci：呈现效果为有序列表 + 圆形序号cols2_ul_sq：呈现效果为无序列表 + 方形序号cols2_ul_ci：呈现效果为无序列表 + 圆形序号col1_ul_sq：呈现效果为有序列表 + 方形序号col1_ul_ci：呈现效应为有序列表 + 圆形序号
渲染效果为有序列表+方形序号
自定义样式为：<!-- _class: cols2_ol_sq fglass -->
- 偏好和效用
- 预算约束和消费者的最优选择
- 需求函数
- 劳动力和储蓄的供给函数
- 福利经济学：单人模型和多人模型
- 企业理论：单投入品和多投入品模型
- 完全竞争市场
- 完全垄断、垄断竞争与双寡头垄断
- 博弈论
- 交换经济与生产经济
- 外部性与公共品
- 不确定性、期望效用和不对称信息
渲染效果为有序列表+圆形序号
自定义样式为：<!-- _class: cols2_ol_ci fglass -->
- 偏好和效用
- 预算约束和消费者的最优选择
- 需求函数
- 劳动力和储蓄的供给函数
- 福利经济学：单人模型和多人模型
- 企业理论：单投入品和多投入品模型
- 完全竞争市场
- 完全垄断、垄断竞争与双寡头垄断
- 博弈论
- 交换经济与生产经济
- 外部性与公共品
- 不确定性、期望效用和不对称信息
渲染效果为无序列表+方形序号
自定义样式为：<!-- _class: cols2_ul_sq fglass -->
- 第一章：地方政府的权力与事务
- 第二章：财税与政府行为
- 第三章：政府投融资与债务
- 第四章：工业化中的政府角色
- 第五章：城市化与不平衡
- 第六章：债务与风险
- 第七章：国内国际失衡
- 第八章：政府与经济发展
渲染效果为无序列表+圆形序号
自定义样式为：<!-- _class: cols2_ul_ci fglass -->
- 第一章：地方政府的权力与事务
- 第二章：财税与政府行为
- 第三章：政府投融资与债务
- 第四章：工业化中的政府角色
- 第五章：城市化与不平衡
- 第六章：债务与风险
- 第七章：国内国际失衡
- 第八章：政府与经济发展
渲染效果为单列+有序列表+方形序号
自定义样式为：<!-- _class: col1_ul_sq fglass -->
- 预算约束和消费者的最优选择
- 劳动力和储蓄的供给函数
- 福利经济学：单人模型和多人模型
- 企业理论：单投入品和多投入品模型
- 完全竞争市场
- 完全垄断、垄断竞争与双寡头垄断
- 交换经济与生产经济
- 不确定性、期望效用和不对称信息
渲染效果为单列+有序列表+圆形序号
自定义样式为：<!-- _class: col1_ul_ci fglass -->
- 预算约束和消费者的最优选择
- 劳动力和储蓄的供给函数
- 福利经济学：单人模型和多人模型
- 企业理论：单投入品和多投入品模型
- 完全竞争市场
- 完全垄断、垄断竞争与双寡头垄断
- 交换经济与生产经济
- 不确定性、期望效用和不对称信息
- 引用的呈现效果为：
合成控制法 (Synthetic Control Method) 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。
- 链接的呈现效果：
- Callouts 是 Awesome Marp 提供的自定义的样式，有 5 种颜色可选：
- 自定义样式为：
<!-- _class: bq-purple -->
合成控制法 (Synthetic Control Method)
SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。
合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
- 自定义样式为：
<!-- _class: bq-blue -->
合成控制法 (Synthetic Control Method)
SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。
合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
- 自定义样式为：
<!-- _class: bq-green -->
合成控制法 (Synthetic Control Method)
SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。
合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
- 自定义样式为：
<!-- _class: bq-red -->
合成控制法 (Synthetic Control Method)
SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。
合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
- 自定义样式为：
<!-- _class: bq-black -->
合成控制法 (Synthetic Control Method)
SCM 最早由 Abadie and Gardeazabal (2003) 提出，用来研究西班牙巴斯克地区恐怖活动的经济成本，属于案例研究范畴 (Case Study)。Athey & Imbens (2017) 认为它是过去 15 年计量方法领域最重要的创新。
合成控制法的基本思想是：虽然无法找到巴斯克地区的最佳控制地区，但可对西班牙的若干大城市进行适当的线性组合（赋予不同的权重），以构造一个更为贴切的「合成控制地区」 (Synthetic Control Region)，然后将真实的巴斯克地区与「合成的巴斯克地区」进行对比，即可得到恐袭的影响。
-
一句题外话：打造 Awesome Marp 模板的最早初衷就是来自几位公众号粉丝朋友的询问，「Marp 是否也能实现想 Beamer 那样的顶部导航栏？」为了实现导航栏的效果，我又多学了一些 CSS 的知识，这套模板才得以成型
-
自定义样式为
navbar：<!-- _class: navbar --> -
导航栏修改自 header，最前面必须加入
\ -
当前活动标题，使用粗体
**粗体** -
其余非活动标题，使用斜体
*斜体* -
如果左侧有文字，需要使用斜粗体
***粗斜体*** -
默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐
这张页面的部分 Markdown 源码：
<!-- _class: navbar -->
<!-- _header: \ ***虹鹄山庄***
- 自定义样式为 `navbar`：`<!-- _class: navbar -->`
- 导航栏修改自 header，最前面必须加入 `\ `
- 当前活动标题：使用粗体 `**粗体**`
- 其余非活动标题：使用斜体 `*斜体*`
- 如果左侧有文字：使用斜粗体 `***粗斜体***`
- 默认根据内容自动分配间距，如果希望右对齐，可以手动增加空格的方式来推动右对齐 -
自定义样式：
<!-- _class: fixedtitleA -->-
使当前页面的标题栏固定在顶部，而非随着内容的多少浮动
-
同时，页面内容也会从顶部起笔，而非垂直方向上居中显示
-
-
自定义样式：
<!-- _class: fixedtitleB -->-
fixedtitleB相比于fixedtitleA，标题增加了底色色块，同时缩小了标题大小 -
其余效果与
fixedtitleA相同 -
但是页面正文内容需要包裹在
<div class="div'></div>标签中
-
使用方法：
- 自定义样式：
<!-- _class: footnote --> - 页面除脚注外的其他内容，写在
<div class = "tdiv"></div> - 页面的脚注内容，写在
<div class = "bdiv"></div>
举个例子，展示一下显示效果：
- 一方面，经济金融化程度的加深，使得金融部门能够凭借资本跨期配置提前抽取其他部门的未来价值，从而扩大金融和非金融部门之间的外部收入差距$^1$。另一方面，经济金融化不断增加企业股东权力，促使企业更加追求股东价值最大化，这一导向将弱化普通劳动者阶层的议价能力，食利者阶层的财产性收入增加必然会挤压劳动收入份额，从而扩大了内部收入差距$^2$。
1 张甜迪. 金融化对中国金融、非金融行业收入差距的影响[J]. 经济问题, 2015(11): 40-46. 2 Hein E. Finance-dominated capitalism and re-distribution of income: a Kaleckian perspective[J]. Cambridge Journal of Economics, 2015, 39(3): 907-934.
对于字体大小的调节，直接修改 CSS 文件应该很方便的。但有小伙伴提出，“希望可以增加字体调节的自定义样式”，于是目前提供了四种微调样式：
- 自定义样式 1：
<!-- _class: tinytext -->（是默认字体大小的 0.8 倍） - 自定义样式 2：
<!-- _class: smalltext -->（是默认字体大小的 0.9 倍） - 自定义样式 3：
<!-- _class: largetext -->（是默认字体大小的 1.15 倍） - 自定义样式 4：
<!-- _class: hugetext -->（是默认字体大小的 1.3 倍）
比如，本页面采用的自定义样式为 largetext
- 通过
<div class="caption">宇宙的奥妙</div>来定义图表的标题
- Markdown 是一种极轻量的文本标记语言，允许人们使用易读易写的纯文本格式编写文档，而且对于表格、代码、图片、公式等支持良好
- 应用广泛：网站、课程笔记/讲义、演示文稿、撰写学术论文等
- Markdown 基础语法：
- 参阅：Markdown 中文文档、Markdown 指南、Markdown 菜鸟教程
- 标题
#、粗体** **、斜体* *、删除线~~ ~~、分割线---、超链接[]() - 引用
>、列表-/1.、代码块 - 脚注
[^1]/[^1]:、待办事项[ ]/[x]
- Markdown 进阶语法：
- 图片
![]()：本地路径、网络路径（参阅：图床与 PicGo——让你爱上记录与分享） - 数学公式：行内公式
$...$、行间公式$$...$$ - 支持 HTML 元素：
<br>/<hr>/<b></b>/<i></i>/<kbd></kbd>等
- 图片
VS Code
- Visual Studio Code下载地址
- VS Code 插件：
- 配合 Markdown：Markdown Preview Enhanced、Markdown All in One
- 图床：PicGo
- 格式化文档：Pangu-Markdown
- Markdown 转 PPT：Marp for VScode
- Markdown 转思维导图：Markmap for VScode
- 配合 Zotero：Citation Picker for Zotero、Pandoc Citer
Obsidian
- Obsidian 主页
- 基于 Markdown 的本地知识管理软件
- 除官方同步和发布功能外，对个人使用者完全免费
- 功能丰富、插件众多、开发社区活跃
-
几个字总结 Marp：使用 Markdown 创作演示文稿
- 来自 Marp 官方网页的一段话：Marp (also known as the Markdown Presentation Ecosystem) provides an intuitive experience for creating beautiful slide decks. You only have to focus on writing your story in a Markdown document.
-
在 Markdown 文件的顶部 YAML 区域，通过
marp: true启动 Marp，然后即可开启侧边预览，VS Code 界面左边是代码区域，右边为预览区域 -
内容遵循 Markdown 语法，但 Marp 增加了一些内置指令，而且指令分为全局指令和局部指令，全局指令建议放置于 YAML 区，局部指令位于当前页面，不同页面通过
---切分
---
marp: true # 开启 Marp
size: 16:9 # 设定页面比例，常见有 16:9 或 4:3，默认为16:9
theme: gaia # 切换主题，内置 3 种样式的主题，可以自定义主题
paginate: true # 开启页码
headingDivider: 2 # 通过二级标题切分页面，省去手动换页的麻烦
footer: 初虹 # 设置页脚区域的内容，如果设定页眉的内容，则为 header
---- 如果想让页面同时被多个级别的标题切分，比如，以二级~四级标题分割页面，可以
headingDivider: [2,3,4] - 想要使得多个自定义样式渲染同一个页面，可直接将不同自定义样式以空格连接，比如：
<!-- _class: cols-2-64 fglass -->
-
- 微信：favourhong
-
- 公众号：虹鹄山庄
