oioihoii

Marp 教程：實現分欄和其他高級排版技巧

引言

Marp 是一個基于 Markdown 的幻燈片制作工具，結合 VSCode 的強大編輯功能，可以讓你的 PPT 制作過程變得更加高效和專業。本文將詳細介紹如何在 Marp 中實現分欄和其他高級排版技巧，使你的幻燈片更加美觀和有條理。

準備工作

1. 安裝 VSCode 和 Marp 插件

• 如果你還沒有安裝 VSCode，可以從 Visual Studio Code 官網 下載并安裝。
• 在 VSCode 中安裝 “Marp for VS Code” 插件。可以通過點擊左側活動欄上的擴展圖標或按 Ctrl+Shift+X 打開擴展市場，搜索并安裝。

2. 了解 Marp 的基本結構

Marp 使用 Markdown 語法來創建幻燈片，但它有幾個特定的語法來控制幻燈片的布局和樣式：

• 新幻燈片：在 Markdown 中使用 --- 來分隔不同的幻燈片。
• 標題：使用 # 表示幻燈片標題。
• 內容：正常的 Markdown 語法。

分欄排版

1. 使用 CSS 實現分欄

Marp 支持通過 CSS 來實現分欄布局。以下是一個簡單的示例：

/* 在 custom-style.css 中 */
section {
    display: flex;
    justify-content: space-between;
}

.column {
    flex: 1;
    padding: 10px;
}

然后在 Markdown 中使用：

---
marp: true
style: custom-style.css
---

# 分欄示例

<div class="column">
- 第一列內容
- 第一列內容
</div>

<div class="column">
- 第二列內容
- 第二列內容
</div>

2. 使用 HTML 和 CSS 實現更復雜的分欄

如果你需要更復雜的分欄布局，可以直接使用 HTML 和 CSS：

---
marp: true
style: custom-style.css
---

# 復雜分欄示例

<div class="container">
    <div class="column left">
        - 左側內容
        - 左側內容
    </div>
    <div class="column right">
        - 右側內容
        - 右側內容
    </div>
</div>

在 custom-style.css 中：

/* custom-style.css */
.container {
    display: flex;
    justify-content: space-between;
}

.column {
    flex: 1;
    padding: 10px;
}

.left {
    background-color: #f0f0f0;
}

.right {
    background-color: #e0e0e0;
}

其他高級排版技巧

1. 多列文本

Marp 支持使用 CSS 多列布局來實現文本的多列排版：

/* 在 custom-style.css 中 */
.multicolumn {
    column-count: 3;
    column-gap: 20px;
}

然后在 Markdown 中使用：

---
marp: true
style: custom-style.css
---

# 多列文本示例

<div class="multicolumn">
這是一個多列文本示例。文本將自動分成三列顯示。
</div>

2. 浮動元素

你可以使用 CSS 的 float 屬性來實現元素的浮動排版：

/* 在 custom-style.css 中 */
.float-left {
    float: left;
    width: 50%;
}

.float-right {
    float: right;
    width: 50%;
}

在 Markdown 中使用：

---
marp: true
style: custom-style.css
---

# 浮動元素示例

<div class="float-left">
- 左側浮動內容
- 左側浮動內容
</div>

<div class="float-right">
- 右側浮動內容
- 右側浮動內容
</div>

3. 網格布局

Marp 也支持 CSS 網格布局，可以實現更復雜的排版：

/* 在 custom-style.css 中 */
.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.grid-item {
    background-color: #f0f0f0;
    padding: 20px;
}

在 Markdown 中使用：

---
marp: true
style: custom-style.css
---

# 網格布局示例

<div class="grid-container">
    <div class="grid-item">第一項</div>
    <div class="grid-item">第二項</div>
    <div class="grid-item">第三項</div>
</div>

總結

通過本教程，你已經學會了如何在 Marp 中實現分欄和其他高級排版技巧。Marp 結合 Markdown 的簡潔性和 CSS 的靈活性，使得 PPT 的制作變得更加直觀和高效。繼續探索 Marp 的更多功能，制作出更加精美的演示文稿吧！

---

注意：本教程假設你已經熟悉了基本的 Markdown 語法和 CSS。如果你對這些概念不熟悉，建議先學習相關基礎知識。

參考資料：

• Marp 官方文檔
• Marp for VS Code 插件文檔