使用Marp以Markdown快速製作簡報，並匯出HTML、PPTX與PDF

Marp的功用

Marp（Markdown Presentation Writer）是一個GitHub的開源專案，用來以Markdown文字格式來製作簡報，文字簡報並能匯出成HTML、PowerPoint的PPTX與PDF檔案。

Marp專案實際上已處於凍結狀態，轉以Marp Next專案為主，因此想要測試Marp的朋友們就不用再下載Marp的App，而應該使用Visual Studio Code的Marp for vscode擴充套件。

• Marp Next網址：Introduction – Marpit: The skinny framework for creating slide deck from Markdown

Marp for VS Code

安裝Marp vs code擴充套件後，編輯區上方工具列會多出Marp的圖示，有匯出與預視兩個選選項。

Marp基本語法

Marp文字檔最開頭要用YAML的寫法加上檔案屬性定義：

---
marp: true
theme: uncover
paginate: true
---

Marp: true 指定本份檔案是Marp Markdown格式，theme: 提定要使用的樣式主題，預設有 default、gaia與 uncover； paginate: 指定每張幻燈片（Slide）是否要加頁碼。

幻燈片之間以 — 分隔，下面是我最近做的一個簡報範例:

---
marp: true
theme: junit5
paginate: true
---
<!-- _paginate: false -->
<!-- _backgroundColor: lightBlue -->
# 使用JUnit5測試程式的操作步驟
 * 基本的軟體開發流程
 * IDEA產生JUnit 5的測試類別

![bg right 80%](./junit5-logo.png)

---
# 結構化 軟體系統開發流程

*  需求蒐集 
*  :arrow_right: 分析 
*  :arrow_right: 設計 
*  :arrow_right: 編程（程式設計）
*  :arrow_right: 測試 
*  :arrow_right: 部署 
*  :arrow_right: 維運

 ![bg left 80%](./junit5-logo.png)

重點說明如下：

1. 第一頁是封面不加頁碼，因此用指引<!-- _paginate: false -->抑制頁碼。
2. <!-- _backgroundClolor: lightBlue -->設定本頁以後的背景色為淡藍色。適用某張幻燈片的指定用底線開頭。
3. ![bg right 80%](相對文字檔的圖檔目錄/圖檔)設定背景圖片，右靠且以80%大小顯示
4. 繪文字（Emoji）代碼可參考 Emoji cheat sheet for GitHub, Basecamp, Slack & more，前後用冒號夾住。

匯出HTML檔

點擊VS Code的Marp圖示，【Export slide deck…】再選擇輸出的存檔類型為 *.html 就能產生出簡報的HTML檔，注意簡報使用的外部資源存放位置（上範例中的圖檔和html檔在同一資料夾）。產生完成後會直接用瀏覽器顯示。

HTML簡報下方會有換頁控制，最右下角有頁碼。

自訂主題樣式

自訂主題的方法在VS Code的擴充套件說明裡有設置步驟，簡述如下：

1. 在VS Code的工作區增加markdown.marp.themes設定，新增.css的路徑檔名。
2. .css檔的第一行是主題名稱：/* @theme 主題名稱 */。
3. Marp Markdown文字檔最開頭的YAML區域裡指定使用的主題名稱，如：theme: junit5。

junit5.css範例：

/* @theme junit5 */

@import 'uncover';

section {
    font-family: 微軟正黑體
}

h1 {
    color: navy;
}

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 0;
  }

  li {
    padding-left: 1em;
    text-indent: -1em;
    align: center
  }

  ul>li:before {
    content: "✅";
    padding-right: 5px;
  }

示範影片

＃＃

您可能也會有興趣的類似文章

• [Visual Studio Code] 手動建立[以Code開啟]的檔案總管右鍵功能表選項 (0則留言, 2018/11/11)
• 超簡易Windows Markdown編輯器：Markdown Monster (0則留言, 2017/01/08)
• Markdown Monster的進階功能： 部落格、Git整合與HTML轉換為Markdown格式（#2） (0則留言, 2019/04/28)
• 修改WordPress外掛讓Markdown與HTML格式並存 (1則留言, 2011/03/30)
• 如何將Markdown文件轉換成HTML？ (1則留言, 2011/03/06)
• 使用Markdown on Save外掛完美解決Markdown與HTML格式並存狀況 (2則留言, 2011/03/31)
• 帶iPad去旅行—行前準備篇＋Markdown試用 (5則留言, 2011/03/05)
• 跨平台的Markdown編輯器：Smark (0則留言, 2014/09/16)
• 文字檔轉換為Kindle MOBI檔的工具：m2m的Step-by-step操作步驟 (更新：直排功能） (12則留言, 2018/09/29)
• Windows Markdown工具：MarkdownPad 2新版本登場 (0則留言, 2013/03/26)
• [Android] 手機的Markdown編輯器：MarkdownX (0則留言, 2016/07/08)
• Java程式庫Markdown4J簡介 (0則留言, 2013/02/22)
• 又一款新發現的Markdown編輯器 (0則留言, 2015/12/08)
• 與Evernote整合的線上Markdown編輯器：馬克飛象（Maxiang） (0則留言, 2014/04/23)
• 國人寫的Windows Markdown記事本軟體：PureMarkdown (0則留言, 2013/02/14)