當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

VSCode+Marp：用Markdown做幻灯片-宋森安（基础篇）

發(fā)布時(shí)間：2023/12/20 编程问答 57 豆豆

生活随笔收集整理的這篇文章主要介紹了 VSCode+Marp：用Markdown做幻灯片-宋森安（基础篇）小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

本文首發(fā)于微信公眾號(hào)【連享會(huì)】

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

郵箱: songsean@88.com

- **目錄** @[toc]
- 0. 前戲
- 1. 前言
- 2. 下載與安裝
- 3. 操作教程
- - 3.1 新建文件
  - 3.2 幻燈片分頁(yè)
  - 3.3 幻燈片預(yù)覽
  - 3.4 導(dǎo)出幻燈片
- 4. 結(jié)束語(yǔ)
- 5. 參考資料
- 6. 相關(guān)推文
- 相關(guān)課程
- - 免費(fèi)公開(kāi)課
  - 最新課程-直播課
  - - ? [課程主頁(yè)](https://www.lianxh.cn/news/46917f1076104.html)
    - ? [課程主頁(yè)](https://www.lianxh.cn/news/46917f1076104.html)
  - 關(guān)于我們

0. 前戲

在正式開(kāi)始之前，先提供一個(gè)最簡(jiǎn)潔的 Marp 幻燈片：點(diǎn)擊網(wǎng)頁(yè)版可以查看幻燈片效果；點(diǎn)擊原始 Markdown 文檔可以看到原始文檔；點(diǎn)擊 B 站視頻版可以查看幻燈片的動(dòng)態(tài)效果。

網(wǎng)頁(yè)版
- 用法：按 F11 全屏/退出
PDF 版
原始 Markdown 文檔；右擊另存
- 這可以作為你的 Marp 幻燈片模板
- 用法： 全選 → 復(fù)制 ( Ctrl+C ) → 貼入「web.marp.app」即可看到幻燈片；點(diǎn)擊左上角藍(lán)色雙三角形圖標(biāo)即可保存到本地，或在線輸出為 PDF 幻燈片。

如果還不明白如何用 Marp 做幻燈片，或者想做出更漂亮的幻燈片，可以繼續(xù)往下看。上述資料都放在我們的 Markdown 倉(cāng)庫(kù)中：

連享會(huì) Markdown 倉(cāng)庫(kù)：https://gitee.com/arlionn/md

1. 前言

制作幻燈片是每個(gè)學(xué)術(shù)人的必備技能。無(wú)論是學(xué)術(shù)報(bào)告、課堂展示，還是答辯路演，幻燈片展示都是必不可少的。而一個(gè)排版精美的幻燈片是一場(chǎng)精彩演講（或匯報(bào)）的前提，即便你的語(yǔ)言再粗糙，也不至于看起來(lái)很糟糕😏。

那么，如何制作出一款漂亮的幻燈片呢？

打開(kāi) Microsoft PowerPoint ，創(chuàng)建一個(gè) .ppt 文件，這或許是你創(chuàng)建幻燈片的做法。

然而，在 Microsoft PowerPoint 里面，我們需要調(diào)整幻燈片的格式，操作起來(lái)些許麻煩。

Markdown 可以減少 Microsoft Word 中復(fù)雜的格式調(diào)整，從而實(shí)現(xiàn)高效的文字排版。🤔那么，我們是否可以使用 Markdown 高效地制作一個(gè)漂亮的幻燈片？

答案是：可以的！

而這就需要請(qǐng)出今天的主角——「 VS Code + Marp 」

「 VS Code + Marp 」簡(jiǎn)介

VS Code（全稱為“ Visual Studio Code ”）就是 Microsoft 推出的一款代碼編輯器，它支持多種語(yǔ)言和文件格式的編寫(xiě)，而 Markdown 語(yǔ)言就是其中之一。總之， VS Code 就是一款 Markdown 文檔編輯器。

Marp 則是一款將 Markdown 文檔轉(zhuǎn)化為幻燈片的軟件（或插件）。

需要提醒的是： 本文為幻燈片制作基礎(chǔ)篇，軟件操作十分簡(jiǎn)單，看完本文即可將 Markdown 文檔轉(zhuǎn)為幻燈片（ 因此，大家不要擔(dān)心，堅(jiān)持看下去哈！）。當(dāng)然，如果你想學(xué)習(xí)用 Marp 制作復(fù)雜的幻燈片，請(qǐng)關(guān)注我們的下一期推文（進(jìn)階篇）。

下圖為連玉君老師用 Markdown 制作的幻燈片：

🤣可以發(fā)現(xiàn)，使用 Markdown 制作的幻燈片排版清晰，具有濃厚的學(xué)術(shù)風(fēng)格。此外，我們可以利用 Markdown 的優(yōu)勢(shì)，在幻燈片中較好地展示出數(shù)學(xué)公式。

2. 下載與安裝

接著，我們需要安裝所要用到的軟件（ VS Code ）。點(diǎn)擊 –鏈接– 下載符合你電腦系統(tǒng)的安裝包，然后正常安裝即可。

Marp 既有獨(dú)立的桌面版軟件，也有網(wǎng)頁(yè)版，以及基于 VS Code 的插件—— Marp for VS Code 。但考慮到現(xiàn)有編輯器已經(jīng)很多，開(kāi)發(fā)者也在推薦用戶直接使用插件 Marp for VS Code。因此，本文只介紹如何用插件 Marp for VS Code 制作幻燈片，不再討論其它使用方式，這樣能也減少軟件安裝。

「 Marp for VS Code」 直接在 VS Code 插件商店搜索即可（如下圖所示）, 或點(diǎn)擊 –鏈接– 下載該插件。

3. 操作教程

3.1 新建文件

打開(kāi) VS Code ，點(diǎn)擊文件->新建文件，將其存為 .md 文件。此時(shí)，我們就創(chuàng)建好一個(gè) Markdown 文檔。

亦可在新建文檔時(shí)，指定后綴，例如，將新建文檔命名為「Slide01.md」即可。

3.2 幻燈片分頁(yè)

特別說(shuō)明：本文的演示代碼來(lái)自 Marp 官網(wǎng) 、開(kāi)發(fā)者 Yuki Hattori 的博客以及連玉君老師的 Markdown 倉(cāng)庫(kù) https://gitee.com/arlionn/md 。

事實(shí)上，創(chuàng)建好一個(gè) Markdown 文檔，你就已經(jīng)成功了80%（🤣前提是你了解 Markdown 語(yǔ)言）。

當(dāng)然，要利用 Marp 制作幻燈片，還需要簡(jiǎn)單地學(xué)習(xí)一些基本命令符號(hào)。繼續(xù)往下看哈！🙃

首先，我們需要在 Markdown 文檔開(kāi)頭標(biāo)記 marp: true，以啟用 Marp 功能。也就是告訴編輯器，你要制作的是幻燈片（Slide）。

需要說(shuō)明的有兩點(diǎn)：

其一，marp: true 語(yǔ)句中的冒號(hào)為半角模式下錄入的；上下的 --- 不可省略；
其二，新建的 Markdown 文檔也可以不做上述標(biāo)記，通過(guò)點(diǎn)擊菜單條中的 Marp 圖標(biāo)即可自動(dòng)添加。具體步驟為：依次點(diǎn)擊 Marp 圖標(biāo) → Toggle Marp feature for current Markdown ( markdown.marp.toggleMarpFeature )，軟件會(huì)自動(dòng)在文檔開(kāi)頭添加 marp: true。如下圖所示：

文字信息如下：

--- marp: true ---# Your slide deckStart writing!

動(dòng)畫(huà)操作如下：

幻燈片通常有多個(gè)頁(yè)面，那么該如何分頁(yè)？

Markdown 通常用---作為水平分割線，而 Marp 則用 --- 表示「分頁(yè)符」，即用以「分割幻燈片」（Slide）。

# Slide 1foo---# Slide 2bar

演示效果如下：

小技巧 (由連玉君老師提供)：為了實(shí)現(xiàn)同一份文檔在「講義」和「幻燈片」之間自由轉(zhuǎn)換。我通常將「---」改寫(xiě)為「--- - --」。看起來(lái)似乎復(fù)雜一點(diǎn)，但替換時(shí)很方便：只需要把「--- - --」替換為空白行或「&emsp;&emsp;」(兩個(gè)空格) 就可以把一份 Marp 幻燈片轉(zhuǎn)成普通講義文稿，反之亦然。而「--- - --」則可以使用搜狗短語(yǔ) 來(lái)快速輸入。只需要預(yù)先定義好短語(yǔ) hh,1=--- - --，每次只輸入 hh，然后敲空格鍵即可。

3.3 幻燈片預(yù)覽

點(diǎn)擊 Marp 圖標(biāo)的右側(cè)，我們就可以在 VS Code 編輯器的右側(cè)實(shí)時(shí)預(yù)覽幻燈片🤪。

3.4 導(dǎo)出幻燈片

點(diǎn)擊 Marp 圖標(biāo)-> Export slide deck ....( markdown.marp.export )即可導(dǎo)出文件。

目前，Marp 可導(dǎo)出四種格式的文件：

HTML
PDF
PPTX (幻燈片)
PNG (僅限于幻燈片的第一頁(yè))
JPEG (僅限于幻燈片的第一頁(yè))

需要注意的是：

導(dǎo)出 HTML 格式的文檔不需要安裝任何插件，也可以很方便地轉(zhuǎn)換為 PDF 格式。
- HTML 格式的幻燈片雙擊即可用默認(rèn)瀏覽器打開(kāi)，亦可右擊文件，選擇特定的瀏覽器打開(kāi) (建議用 Google 瀏覽器打開(kāi))。
- 展示時(shí)建議采用全屏播放模式：按快捷鍵 F11 即可；再次按下 F11 即可退出全屏。
- 用 Google 瀏覽器打開(kāi)后，按快捷鍵 Ctrl+P，并選擇「另存為 PDF」，即可把 HTML 格式的幻燈片轉(zhuǎn)換為 PDF 格式。
若需導(dǎo)出 PDF 和 PPTX 格式，需要安裝 Pandoc，也會(huì)受限于你的操作系統(tǒng)，因此，有時(shí)無(wú)法正常轉(zhuǎn)換。就我個(gè)人的經(jīng)驗(yàn)來(lái)說(shuō)，很少用。

4. 結(jié)束語(yǔ)

Markdown 文字排版高效，且風(fēng)格簡(jiǎn)潔美觀，是許多寫(xiě)作者的不二之選。而事實(shí)上， Markdown 的這種特點(diǎn)對(duì)幻燈片的制作也很合適。幻燈片通常是輔助演講者的一個(gè)工具，這也是說(shuō)，幻燈片不需要制作太復(fù)雜，簡(jiǎn)潔美觀即可（順便吐槽一下：經(jīng)常有人在幻燈片上寫(xiě)滿字，照著幻燈片讀）。

事實(shí)上，學(xué)會(huì)幻燈片分頁(yè)符---，基本就算入門(mén)了。而文字排版功能，Markdown 語(yǔ)言就可以實(shí)現(xiàn)。當(dāng)然，如果你想用 Marp 制作出更為復(fù)雜的幻燈片（背景圖片、主題分割等），請(qǐng)關(guān)注【Stata 連享會(huì)】的下一期推文。

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
連享會(huì) Markdown 倉(cāng)庫(kù)

6. 相關(guān)推文

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

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

相關(guān)課程

免費(fèi)公開(kāi)課

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

關(guān)于我們

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

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

掃碼加入連享會(huì)微信群，提問(wèn)交流更方便

? 連享會(huì)-常見(jiàn)問(wèn)題解答：
? https://gitee.com/lianxh/Course/wikis

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

104.html)