【Marp】基于Markdown-Marp快速制作PPT

零、參考資料

• Marp官網
• Marp Github
• MyMd2PPT
• Markdown轉組會模板ppt
• Marp for VS Code v1: IntelliSense for Marp directives
• 又一款VSCode神級插件Marp，用Markdown來做PPT
• Markdown PPT | 如何自定義Marp主題
• 用Markdown制作幻燈片-五分鐘學會Marp（上篇）-M110a
• 用Markdown制作幻燈片-五分鐘學會Marp（下篇）-M110b
• Awesome Marp：我開發了一整套 Marp 主題，Markdown 轉換的 PPT 也可以很好看！

除了Marp，Slidev也可以將md轉成PPT

• Slidev 官網（生態比Marp好）
• Slidev-更適合程序員使用的PPT制作工具

一、Marp基本語法（創建分頁，排版圖片，更換主題，Marp擴展指令修改樣式）

參考

• 又一款VSCode神級插件Marp，用Markdown來做PPT

• 用Markdown制作幻燈片-五分鐘學會Marp（上篇）-M110a

• 用Markdown制作幻燈片-五分鐘學會Marp（下篇）-M110b

  點擊 VS Code「文件」選項卡，選擇「新建文件」，在彈出的面板，文件類型選擇 Marp Markdown。選擇 Marp Markdown 文件后，會新建一個下圖的文件，開頭有一個配置選項 marp: true，表示使用 Marp 來創建 PPT。點擊文件右上角的「預覽」按鈕，就可以在右側看到第一個幻燈片頁面。

1、創建新的PPT頁面

在末尾添加 3 個短橫線 -，下方就會多出一張新的幻燈片。

2、插入圖片 & 排版圖片

如果我們想要在幻燈片中插入圖片，就會略微麻煩一些。直接插入的本地圖片，渲染后會顯示為丟失，解決的方法是先將本地圖片上傳到網上（圖床），再粘貼圖片鏈接 ，圖片才能正常顯示。關于圖片的語法如下：

• 圖片縮放：
  

• 圖片處理：

  

• 背景圖片排版：

  • 水平排版：
    

  • 垂直排版：

  

  關于圖片的更多排版參數，參考 Image syntax

  

3、更改全局主題（default，uncover，gaia）

Marp 渲染得到的幻燈片默認為白底藍/黑字，如果你不喜歡默認的樣式，可以在 Markdown 文件的開頭，更改 theme 字段的值，來更改幻燈片的全局主題。

theme 字段有 3 個值：

• default（默認值，左對齊排版）
  

• uncover：所有內容都居中顯示，引用內容的樣式從豎線變為雙引號

  

• gaia：白色背景更改為淺黃色，有點像一些閱讀類 App 的暖光/護眼模式，但我不確定這種顏色是否真的護眼……；如果又想像 uncover 主題那樣，讓內容居中顯示，則再添加一個 class 字段，值設置為 lead 即可；

  

4、更換單個幻燈片的背景和文字顏色（Marp擴展指令（Directives））

參考 Directives

如果想自定義其中一個或多個頁面的顏色，則在想要更改幻燈片背景色的頁面開頭，加上 <!-- _backgroundColor: 顏色--> 字段，就可以更改頁面的背景色。

這里的顏色可以是顏色的英文，例如上面的藍色 blue，也可以是 rgb 值，這有點像是在寫 CSS 樣式了；更改文本內容的顏色，需要在下面多配置一個選項 <!-- _color: 顏色-->，就能自定義文本的顏色。

5、將幻燈片導出為 PDF/PPT

點擊 Marp Markdown 文件右上角的 Marp 圖標（三角形圖標），在彈出的面板，選擇「Export Slide Deck」，就可以將 PPT 導出為 PDF 啦～

二、Marp高階（Marp擴展指令，CSS全局樣式，CSS局部樣式，自定義CSS樣式）

參考 Markdown PPT | 如何自定義Marp主題

1、通過Marp擴展指令設置相應樣式（全局指令，局部指令）

參考Directives

常用的Marp擴展指令包括：

• 全局指令（指令前不加_）和局部指令（指令前加_）的用法

  # Global directives
  <!-- backgroundColor: aqua -->
  This page has aqua background.# Local directives
  <!-- _backgroundColor: aqua -->
  Add underscore prefix `_` to the name of local directives.
  

• 全局指令

  

• 局部指令

  

2、CSS全局樣式修改/局部樣式修改（CSS與MD的映射，CSS與Marp擴展指令的映射）

CSS與MD的映射：section - ‘畫布‘，h1 - ‘#‘，blockquote - ‘>‘… ；

CSS與Marp擴展指令的映射：footer - footer，header - header, …

命令只能對Slide的小部分內容進行調整，如果想要對Slide的文字樣式做出調整，那么就需要對全局樣式和局部樣式做出修改，支持CSS語法。

1）全局樣式修改

• 1）直接在markdown頂部設置style樣式

  --
  marp: true
  theme: gaia
  style: | section { background-color: #ccc; } h1 { text-align:left; }
  ---
  

  全局樣式的修改是以 style 命令進行的，如上面展示的那樣，我們可以在style命令中對樣式進行相關修改。

• 2）自定義CSS樣式文件，修改全局樣式主題

  ---
  marp: true
  theme: myThemes
  paginate: false
  ---# 基于大數據技術的農業產業園智能化管理與優化研究
  

  /* @theme myThemes */@charset "UTF-8";
  @import 'uncover';/* @import-theme 'default'; */h1 {text-align:left;color: #D32E33;margin-top: 20px;margin-bottom: 20px;font-size:40px;line-height: 25px;
  }
  

  其中myThemes.css為自定義的CSS樣式文件，其中的<h1>標簽對應MD中的#，會影響MD對應內容的顯示效果

2）局部樣式修改

在MD中添加CSS樣式（加上scoped）

參考 Scoped style

如果只想修改本頁PPT的樣式，可以通過<style scoped>...</style>來添加當前頁指定標簽的樣式，如果不帶上scoped，該樣式默認會作為下一個分頁的樣式。

---
marp: true
theme: myThemes
paginate: false
---
<!-- backgroundImage: url("./images/homePage.png") -->
<style scoped>
h1 {text-align:center;color: #D32E33;margin-top: 20px;margin-bottom: 20px;font-size:60px;line-height: 70px;
}
</style># 基于大數據技術的農業產業園智能化管理與優化研究---
<!-- backgroundImage: url("./images/header.png") -->
<!-- _header: 經驗分享 --># markdown筆記轉為帶模板的組會ppt

比如上面展示了首頁大標題且居中的效果，但不會影響到下一個分頁的樣式

3、自定義CSS主題文件（路徑配置，聲明主題并在MD中引用）

1）關于CSS文件的路徑配置

如果想要使用自己的CSS主題文件，你首先需要在當前md文件夾下新建.vscode 文件夾，在該文件夾下新建settings.json文件，添加如下內容。

{"markdown.marp.themes": ["https://example.com/foo/bar/custom-theme.css","custom theme.css path",]}

custom theme.css path 要添加自定義主題文件的路徑，例如 ./themes/UCASSimple.css

2）關于CSS文件中的主題別名設置

除去上面的文件，在CSS 文件頭部需要添加 /* @theme <custom theme name>*/ 來聲明是這是一個Marp主題，這樣在編寫.md 文件時就可以借助 theme: <custom theme name> 使用自定義的主題了。

隨后CSS文件中需要利用@import 導入已有的主題文件，目前Marp官方有default gaia uncover 三款主題。

接著就可以編寫CSS文件自定義主題了。

3）CSS文件示例

/* @theme UCASSce */@charset "UTF-8";
@import 'uncover';section {font-size: 25px;padding: 50px;text-align: left;font-family:Arial, Helvetica, sans-serif;background:whitesmoke;}h1 {text-align:left;color: rgb(60, 112, 198);margin-top: 150px;margin-bottom: 0px;font-size:72px;}header {left: 50px;right: 50px;top: 10px;height: 50px;background-image: url("./images/logo.png"); background-position: right top;background-repeat: no-repeat;background-size: 200px;text-align:left;color: rgb(60, 112, 198);font-weight: bold;font-size:36px;}

自定義CSS樣式文件沒有起效果的主要原因

• .vscode文件夾不是項目文件夾下的一級文件夾

  

• 在 .vscode/setting.json中引用的css文件相對路徑有誤，此時md文件會報錯：

  The specified theme "myThemes" is not recognized by Marp for VS Code.marp-vscode(unknown-theme)
  

  

三、Marp實戰

1、關于組會PPT的Demo

參考MyMd2PPT

---
marp: true
theme: TsinghuaPPT
paginate: false
---
<!-- backgroundImage: url("./images/title.png") --><!-- _header: 經驗分享 --># markdown筆記轉為帶模板的組會ppt## 動機
個人習慣用markdown來記錄筆記，但是組會匯報又需要固定的模板，一遍遍復制過去太耗時間，于是需要尋找一個高效的md轉換為組會ppt的方法## 步驟1. 安裝Marp for VSCode
2. 看其他教程學習Marp基礎用法
3. 在.vscode中注冊自定義主題
4. 編寫自定義theme的.css文件
5. 享受效率吧！---<!-- headingDivider:  -->
<!-- prerender: true -->
<!-- _header: 工作匯報 --># 一級標題
一級內容
> “How well does simulation match the real world? What is the value of simulation vis-a-vis testing in a physical environment that includes other vehicles, pedestrians, and other road users?  
> 模擬與真實世界的匹配程度如何?在包含其他車輛、行人和其他道路使用者的物理環境中，仿真對測試的價值是什么?” ([pdf](zotero://open-pdf/library/items/9AULW8RM?page=1))
## 二級標題
二級內容<!-- _footer:  ■ 總結框模板  -->---![bg](./images/thanks.png)

其中PPT主題用到的CSS樣式如下：

/* @theme TsinghuaPPT */@charset "UTF-8";
@import 'uncover';/* @import-theme 'default'; */section {font-size: 25px;padding-left: 50px;padding-right: 45px;text-align: left;letter-spacing: 2px;font-family:Arial, Helvetica, sans-serif;background-image: url('./title2.jpg') ;/* background-repeat:no-repeat; *//* background-attachment:fixed; *//* background-position:center; *//* margin-top: 40px; */padding-top: 75px;}h1 {
text-align:left;
color: rgb(146, 46, 142);
margin-top: 20px;
margin-bottom: 20px;
font-size:40px;
line-height: 25px;
}h2 {
text-align:left;
margin-top: 12px;
font-size: 30px;
line-height: 25px;
margin-bottom: 15px;
}h3 {text-align:left;margin-top: 10px;margin-bottom: 12px;font-size: 27px;line-height: 25px;}p {text-align:left;font-size: 22px;margin-top: 7px;margin-bottom: 10px;letter-spacing: 1px;/* text-indent: 50px; */
}header {left: 57px;right: 50px;top: 15px;height: 50px;/* background-image: url("./header.png"); background-position: center;background-repeat: no-repeat; *//* background-size: 200px; */text-align:left;color: rgb(146, 46, 142);font-weight: bold;font-size:40px;
}footer {height: auto;font-size:28px;border-color: rgb(146, 46, 142);/* border: 10px; */border-width: 4px;border-style: solid;font-weight: bold;list-style-type: square;content: 'shsh';padding-left: 20px;padding-top: 12px;padding-bottom: 12px;color: rgb(37, 64, 97);/* display:inline-block; */
}/* blockquote {background-color: rgba(231,247,239,1.0);padding: 10px;padding-inline-start: 20px;border-radius: 10px;
} */blockquote {background: rgba(173, 216, 230, 0.15);border-left: 10px solid rgb(173, 216, 230);/* margin: 1.5em 10px; */padding: 0.5em 10px;border-top-right-radius: 3px;border-bottom-right-radius: 3px;/* quotes: "\201C""\201D""\2018""\2019"; */
}
blockquote:before {color: #ccc;content: none;/* font-size: 4em;line-height: 0.1em;margin-right: 0.25em;vertical-align: -0.4em; */
}
blockquote:after {color: #ccc;content: none;/* font-size: 4em;line-height: 0.1em;margin-right: 0.25em;vertical-align: -0.4em; */
}
blockquote p {display: inline;
}

效果如下：

2、在PPT中快速插入代碼和表格

這里可以結合Markdown語法優勢，在PPT中快速插入代碼、公式和表格

但是存在的問題是markdown的表格和代碼不太好水平排版