?

Stata連享會 ? 主頁 || 視頻 || 推文 || 知乎

本文首發(fā)于【stata連享會】

作者：宋森安（西南財經(jīng)大學(xué)）；張家豪（西北大學(xué)）；連玉君（中山大學(xué)）

郵箱: songsean@88.com

?

---

文章目錄

• • @[toc]
  • 1. 指令
  • • 1.1 指令的使用方法
    • 1.2 指令類型
    • 1.3 標(biāo)題分隔符
    • 1.4 頁碼
    • 1.5 頁眉和頁腳
    • 3. 主題風(fēng)格
  • 4. 圖片語法
  • • 4.1 調(diào)整圖片大小
    • 4.2 圖片濾鏡
    • 4.3 幻燈片背景
    • 4.4 高級背景
  • 5. 參考資料
  • 6. 相關(guān)推文
  • 相關(guān)課程
  • • 免費公開課
    • 最新課程-直播課
    • • ? [課程主頁](https://www.lianxh.cn/news/46917f1076104.html)
      • ? [課程主頁](https://www.lianxh.cn/news/46917f1076104.html)
    • 關(guān)于我們

?

1. 指令

在上一期推文（基礎(chǔ)篇）中，我們介紹了如何用「 VS Code + Marp 」將 Markdown 文檔轉(zhuǎn)為幻燈片。然而，僅靠 Markdown 制作出的幻燈片格式可能會比較單調(diào)。為了制作出更加漂亮的幻燈片，我們還需要學(xué)習(xí)一種被稱之為 **指令（Directives）**的擴(kuò)展語法。例如，指令 theme 可改變幻燈片的主題，paginate 可顯示出幻燈片的頁碼，footer 用于設(shè)置幻燈片的頁腳內(nèi)容， size 可調(diào)整幻燈片的大小， backgroundColor 用于變換幻燈片的背景顏色等。

特別說明：本文的演示代碼來自 Marp 官網(wǎng) 、開發(fā)者 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 中的宏。

其中，全局指令是整個幻燈片設(shè)定值，例如 theme、headingDivider、style。在全局指令前面添加前綴 $，就可以實現(xiàn)對整個幻燈片的設(shè)定。

而局部指令用以設(shè)置當(dāng)前幻燈片頁面以及后續(xù)頁面。例如，我們用<!-- backgroundColor: aqua --> 設(shè)置幻燈片的背景顏色。

<!-- backgroundColor: aqua -->This page has aqua background.---The second page also has same color.

幻燈片演示效果如下：

當(dāng)然，如果您只想將局部指令應(yīng)用于當(dāng)前頁面，則需要指令前添加前綴 _ 。

<!-- _backgroundColor: aqua -->Add underscore prefix `_` to the name of local directives.---The second page would not apply setting of directives.

對比上下兩圖，可以明顯地看出兩者之間的差異。

?

1.3 標(biāo)題分隔符

除了頁面分割符---，如果文章結(jié)構(gòu)比較清晰，我們還可以使用全局指令 headingDivider 分隔幻燈片頁面。換句話說，就是 headingDivider 通過識別 Markdown 文檔的標(biāo)題來實現(xiàn)幻燈片分頁。

例如，下面兩個 Markdown 文檔具有相同的輸出。

一般語法如下：

# 1st pageThe content of 1st page---## 2nd page### The content of 2nd pageHello, world!---# 3rd page😃

Heading Divider 如下：

<!-- headingDivider: 2 --># 1st pageThe content of 1st page## 2nd page### The content of 2nd pageHello, world!# 3rd page😃

?

1.4 頁碼

局部命令 paginate 用于顯示幻燈片的頁碼。

<!-- paginate: true -->You would be able to see a page number of slide in the lower right.

當(dāng)然，如果我們不想在標(biāo)題頁面出現(xiàn)頁碼，只需將指令 paginate 移到第二頁即可。

# Title slideThis page will not paginate by lack of `paginate` local directive.---<!-- paginate: true -->It will paginate slide from a this page.

?

1.5 頁眉和頁腳

當(dāng)需要在多張幻燈片中顯示相同的頁眉或頁腳時，可將局部指令 header或 footer 寫在 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 制作幻燈片##### 作者:宋森安 (西南財經(jīng)大學(xué))；張家豪(西北大學(xué)) ##### 郵箱: songsean@88.com--- ### 文章目錄- #### 一、前言 - #### 二、下載與安裝 - #### 三、操作教程 - #### 四、討論 - #### 五、參考資料 - #### 六、相關(guān)推文

上述 Markdown 文檔改動自 連玉君老師的幻燈片，其演示效果如下圖：

3. 主題風(fēng)格

目前，Marp 提供 Default 、Gaia 和 uncover 三種主題風(fēng)格。

下面筆者簡單演示這三種主題風(fēng)格：

--- marp: true --- <!-- theme: Default-->## <!-- fit --> VS Code + Marp: 用 Markdown 制作幻燈片### 來源：Stata 連享會 ### 作者：宋森安(西南財經(jīng)大學(xué)); 張家豪(西北大學(xué))

注釋：<!-- fit --> 用于自動調(diào)整標(biāo)題（一級標(biāo)題）大小，以適應(yīng)幻燈片大小。

Default 主題風(fēng)格的演示效果如下：

將<!-- theme: Default-->更換為<!-- theme: Gaia-->，幻燈片演示風(fēng)格就變成下圖：

可以發(fā)現(xiàn)，在 Gaia 主題背景下，幻燈片的內(nèi)容會對齊到左上方。但是我們可以使用 class: lead 來改變。

<!-- theme: gaia class: lead -->

添加 class: lead 后，幻燈片的演示效果如下：

Uncover 主題風(fēng)格演示效果如下：

?

4. 圖片語法

圖片語法句式為 。其中，[keywords] 用于設(shè)置幻燈片的尺寸、顏色等參數(shù)，(image.jpg)是圖片地址。

?

4.1 調(diào)整圖片大小

在[keywords]中添加 width 、 height 等關(guān)鍵詞調(diào)整圖片的大小。

 <!-- Setting width to 200px -->  <!-- Setting height to 300px -->  <!-- Setting both lengths -->

這里也可以使用關(guān)鍵詞的縮寫 w 和 h ：

 <!-- Setting size to 32x32 px -->

?

4.2 圖片濾鏡

Marp 還支持將 CSS filters 應(yīng)用于圖片語法，替換[keywords]中的內(nèi)容，可對圖片進(jìn)行渲染。例如，![blur:10px]()、![brightness:1.5]() 、 ![contrast:200%]()、![saturate:2.0]()、![sepia:1.0]()等指令。當(dāng)省略括號內(nèi)的參數(shù)時，軟件會直接使用默認(rèn)參數(shù)。

當(dāng)然，我們可以將多個濾鏡應(yīng)用于圖片。


例如，筆者使用 ，原圖就被渲染成深褐色。

?

4.3 幻燈片背景

關(guān)鍵詞 bg 可設(shè)置幻燈片的背景，具體句式為：。

此外，我們可在 bg 后添加關(guān)鍵詞選項，用于調(diào)整背景圖片的尺寸。

例如，（縮放圖像以填充幻燈片，這也是默認(rèn)圖片設(shè)置） 、  （縮放圖像以適應(yīng)幻燈片） 、 （不縮放圖像，并使用原始大小） 、 （按照指定百分比縮放）。

?

4.4 高級背景

我們還可以通過高級背景來實現(xiàn)多重背景、背景拆分，甚至通過圖片濾鏡來設(shè)置幻燈片背景。

  

注釋：背景圖片由網(wǎng)站 fakeimg.pl 自動生成的假圖片，改變 text= 后的內(nèi)容，圖片文字隨之改變。

多重背景圖的演示效果如下：

  

在 bg 后加入 vertical 后，背景圖片就會垂直排列，幻燈片演示效果如下圖：

在 bg 右側(cè)添加 left 或 right 可設(shè)置背景圖的位置。添加 left 或 right 后，幻燈片內(nèi)容所占的空間也會減小一半。

--- marp: true --- <!-- color: black--> # 歡迎報考 西北大學(xué)

拆分背景的演示效果如下圖：

我們也可以將多張圖片固定在一側(cè)。

文本信息如下：

--- marp: true --- <!-- color: black--> # 歡迎報考 ## 西北大學(xué)、西南財經(jīng)大學(xué)

幻燈片演示效果如下圖：

除了通過圖片設(shè)置背景外，Marp 也支持設(shè)定顏色參數(shù)來改變幻燈片背景。背景顏色的基本句式為 ) ，文字顏色的基本句式為 )。如下圖所示：

?

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. 相關(guān)推文

Note：產(chǎn)生如下推文列表的 Stata 命令為：
? lianxh Markdown
安裝最新版 lianxh 命令：
? ssc install lianxh, replace

• 專題：Markdown
  • Markdown：五分鐘Markdown教程
  • Markdown教程之LaTeX數(shù)學(xué)公式簡介
  • Markdown：一鍵將-Word-轉(zhuǎn)換為-Markdown
  • Markdown-圖床
  • Markdown常用LaTex數(shù)學(xué)公式
  • 連玉君Markdown筆記
  • Markdown中書寫LaTeX數(shù)學(xué)公式簡介
  • 在 Markdown 中使用表情符號
  • 在 Markdown 中使用表情符號
  • mdnice.cn——Markdown、知乎、公眾號排版神器
  • 兩種網(wǎng)頁轉(zhuǎn)Markdown的簡便方法
• 專題：工具軟件
  • 學(xué)術(shù)論文寫作新武器：Markdown-上篇
  • 學(xué)術(shù)論文寫作新武器：Markdown-中篇
  • 學(xué)術(shù)論文寫作新武器：Markdown-下篇
  • 畢業(yè)季10分鐘Markdown簡歷——風(fēng)格瞬間變

?

相關(guān)課程

免費公開課

• 直擊面板數(shù)據(jù)模型 - 連玉君，時長：1小時40分鐘，課程主頁
• Stata 33 講 - 連玉君, 每講 15 分鐘.
• Stata 小白的取經(jīng)之路 - 龍志能，時長：2 小時，課程主頁
• 部分直播課 課程資料下載 (PPT，dofiles等)

最新課程-直播課

專題嘉賓直播/回看視頻

? 最新專題		文本分析、機(jī)器學(xué)習(xí)、效率專題、生存分析等
研究設(shè)計	連玉君	我的特斯拉-實證研究設(shè)計，-幻燈片-
面板模型	連玉君	動態(tài)面板模型，-幻燈片-
面板模型	連玉君	直擊面板數(shù)據(jù)模型 [免費公開課，2小時]

• Note: 部分課程的資料，PPT 等可以前往 連享會-直播課 主頁查看，下載。

?

? 課程主頁

? 課程主頁

?

關(guān)于我們

• Stata連享會 由中山大學(xué)連玉君老師團(tuán)隊創(chuàng)辦，定期分享實證分析經(jīng)驗。
• 連享會-主頁 和 知乎專欄，400+ 推文，實證分析不再抓狂。直播間 有很多視頻課程，可以隨時觀看。
• 公眾號關(guān)鍵詞搜索/回復(fù) 功能已經(jīng)上線。大家可以在公眾號左下角點擊鍵盤圖標(biāo)，輸入簡要關(guān)鍵詞，以便快速呈現(xiàn)歷史推文，獲取工具軟件和數(shù)據(jù)下載。常見關(guān)鍵詞：課程, 直播, 視頻, 客服, 模型設(shè)定, 研究設(shè)計, stata, plus, 繪圖, 編程, 面板, 論文重現(xiàn), 可視化, RDD, DID, PSM, 合成控制法 等

?

連享會小程序：掃一掃，看推文，看視頻……

?

掃碼加入連享會微信群，提問交流更方便

? 連享會-常見問題解答：
? https://gitee.com/lianxh/Course/wikis

?

New！ lianxh 命令發(fā)布了：
隨時搜索連享會推文、Stata 資源，安裝命令如下：
? . ssc install lianxh
使用詳情參見幫助文件 (有驚喜)：
? . help lianxh

s, 繪圖, 編程, 面板, 論文重現(xiàn), 可視化, RDD, DID, PSM, 合成控制法` 等

?

連享會小程序：掃一掃，看推文，看視頻……

[外鏈圖片轉(zhuǎn)存中…(img-YAIbMSSi-1624432040813)]

?

掃碼加入連享會微信群，提問交流更方便

[外鏈圖片轉(zhuǎn)存中…(img-2aQFcFRq-1624432040815)]

? 連享會-常見問題解答：
? https://gitee.com/lianxh/Course/wikis

?

New！ lianxh 命令發(fā)布了：
隨時搜索連享會推文、Stata 資源，安裝命令如下：
? . ssc install lianxh
使用詳情參見幫助文件 (有驚喜)：
? . help lianxh

總結(jié)

以上是生活随笔為你收集整理的VSCode+Marp：用Markdown做幻灯片（进阶篇）-宋森安的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。