oioihoii

Marp 入門與教程：讓你一分鐘愛上代碼寫PPT的樂趣

Posted on 2024-12-16 03:45 Further_Step 閱讀(338) 評論(0) 收藏舉報來源

Marp 入門與教程

一、什么是 Marp？

Marp 是一個基于 Markdown 的開源幻燈片制作工具，可以輕松將 Markdown 文檔轉換為精美的幻燈片。其核心是 Marpit 框架，支持可定制主題、多種輸出格式和動態功能。

與 LaTeX 的 Beamer 比較：

對比項	Marp	LaTeX (Beamer)
易用性	使用 Markdown 語法，易學易用	基于 TeX，語法復雜，學習曲線陡峭
功能擴展性	- 支持 CSS 定制 - 支持圖片背景 - 支持 Mermaid 圖表 - 支持自動布局和響應式設計	- 強大的數學公式支持 - 適合編寫專業文檔 - 高級的排版控制
輸出支持	HTML、PDF、PPTX	PDF
實時預覽	可通過 VS Code 插件快速預覽	缺乏直觀的實時預覽
適用場景	快速演示文稿、輕量級幻燈片	高端學術演示或復雜幻燈片

總結：Marp 更適合需要快速生成現代化演示文稿的用戶，而 LaTeX Beamer 更適合專業的學術排版。

二、Marp 支持的功能

通過插件快速制作：支持 VS Code 插件和實時預覽。
命令行工具 (CLI)：批量處理，導出 HTML、PDF 等格式。
支持 YAML 配置：靈活設置幻燈片主題、尺寸和分頁。
自定義樣式：支持 CSS 修改主題和排版樣式。
嵌入動態內容：如代碼高亮、公式 (MathJax)、圖片背景等。
多種主題支持：內置主題（default、gaia、uncover）和自定義擴展主題。

三、功能介紹與入門教程

1. 使用 VS Code 插件

功能簡介

提供實時預覽功能。
可一鍵導出 PDF。
支持 Markdown 語法高亮。

入門教程

安裝 VS Code 和插件
- 下載并安裝 VS Code。
- 在擴展商店搜索并安裝 Marp for VS Code 插件。

新建 Markdown 文件
創建一個 .md 文件，并在文件開頭加入以下 YAML 配置：
```
---
marp: true
theme: uncover
size: 16:9
paginate: true
backgroundColor: #f0f0f0
---
```

實時預覽
點擊下圖 Marp 圖標，即可看到實時幻燈片預覽。
導出 PPT
點擊下圖圖標，選擇Export……，最后在保存類型處點擊下拉框選擇要保存的文件類型

2. 使用 CLI 工具

功能簡介

支持批量生成和自動化處理。
輸出 HTML、PDF 等格式。

入門教程

安裝 CLI 工具
- 安裝 Node.js 環境。
- 執行以下命令安裝 Marp CLI：
```
npm install -g @marp-team/marp-cli
```

創建 Markdown 幻燈片
示例內容如下：

---
marp: true
theme: gaia
size: 4:3
---
# 歡迎使用 Marp
- 簡單
- 快速
- 美觀

導出為 PDF 或 HTML

導出 PDF：
```
marp slide.md -o slide.pdf
```
實時預覽：
```
marp slide.md --preview
```

3. 自定義主題

功能簡介

通過 CSS 修改樣式，滿足品牌化或個性化需求。

入門教程

創建主題 CSS 文件

@import 'https://fonts.googleapis.com/css?family=Roboto';

section {
    font-family: 'Roboto', sans-serif;
    background-color: #ffffff;
    color: #333333;
}

h1 {
    font-size: 2.5em;
    color: #ff5733;
}

引用自定義主題
在 Markdown 文件中添加：
```
---
marp: true
theme: custom
---
```
應用主題
使用 CLI 或插件預覽效果。

四、Marp 的優勢與應用案例

快速上手：
- 對比 LaTeX Beamer，不需要復雜的語法和環境配置，學習成本低。
- YAML 配置簡單明了。
跨平臺支持：
- 支持在不同系統（Windows、macOS、Linux）下運行，且兼容多種編輯器。
現代化設計：
- 內置主題時尚美觀，支持動態背景和交互內容。
適用場景豐富：
- 技術分享：嵌入代碼片段、公式等內容。
- 工作匯報：快速制作專業化演示文稿。
- 教學場景：Markdown 文本輕松生成幻燈片。

應用案例：

技術分享：通過 VS Code 插件，工程師可以快速構建內含代碼高亮的技術演示。
團隊培訓：CLI 批量生成幻燈片，滿足大規模培訓需求。
個人總結：寫筆記的同時生成高質量幻燈片，一舉兩得。

按以上步驟學習后，相信你能快速掌握 Marp，并將其高效應用于日常工作和學習中。

刷新頁面返回頂部