oioihoii

Marp 教程：實現幻燈片的交互性

引言

Marp 是一個基于 Markdown 的幻燈片制作工具，結合 VSCode 的強大編輯功能，可以讓你的 PPT 制作過程變得更加高效和專業。雖然 Marp 本身不支持復雜的交互性，但通過嵌入 HTML 和 JavaScript，可以實現一些簡單的交互效果。本教程將詳細介紹如何在 Marp 中實現幻燈片的交互性。

準備工作

1. 安裝 VSCode 和 Marp 插件

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

2. 了解 Marp 的基本結構

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

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

實現基本交互性

1. 嵌入 HTML 和 JavaScript

Marp 允許你直接在 Markdown 中嵌入 HTML 和 JavaScript 來實現交互效果。以下是一個簡單的示例：

---
marp: true
---

# 交互性示例

<div id="interactive-element">
    <button οnclick="changeText()">點擊我</button>
    <p id="text">點擊按鈕改變文本</p>
</div>

<script>
function changeText() {
    document.getElementById('text').innerText = '文本已改變！';
}
</script>

2. 動態內容

你可以使用 JavaScript 來動態改變幻燈片的內容。例如，創建一個簡單的計數器：

---
marp: true
---

# 計數器示例

<div id="counter">
    <button οnclick="increment()">增加</button>
    <button οnclick="decrement()">減少</button>
    <p id="count">0</p>
</div>

<script>
let count = 0;

function increment() {
    count++;
    document.getElementById('count').innerText = count;
}

function decrement() {
    count--;
    document.getElementById('count').innerText = count;
}
</script>

3. 表單交互

通過表單元素，你可以實現用戶輸入的交互：

---
marp: true
---

# 表單交互示例

<form οnsubmit="return false;">
    <input type="text" id="input" placeholder="輸入你的名字">
    <button οnclick="greet()">問候</button>
</form>
<p id="greeting"></p>

<script>
function greet() {
    const name = document.getElementById('input').value;
    document.getElementById('greeting').innerText = `你好，${name}！`;
}
</script>

實現高級交互性

1. 幻燈片導航

你可以使用 JavaScript 來控制幻燈片的導航：

---
marp: true
---

# 導航示例

<div>
    <button οnclick="goToSlide(2)">跳轉到第2頁</button>
    <button οnclick="goToSlide(3)">跳轉到第3頁</button>
</div>

<script>
function goToSlide(slideNumber) {
    window.location.hash = `#${slideNumber}`;
}
</script>

---

# 第二頁

---

# 第三頁

2. 動畫效果

通過 JavaScript 控制 CSS 動畫，可以實現更復雜的交互效果：

---
marp: true
---

# 動畫示例

<div id="animated-element" class="animated">
    <button οnclick="animate()">點擊我</button>
</div>

<style>
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.animated {
    animation: fadeIn 1s;
    display: none;
}
</style>

<script>
function animate() {
    const element = document.getElementById('animated-element');
    element.style.display = 'block';
}
</script>

3. 交互式圖表

你可以使用 JavaScript 庫（如 Chart.js）來創建交互式圖表：

---
marp: true
---

# 交互式圖表示例

<canvas id="myChart"></canvas>

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script>
const ctx = document.getElementById('myChart').getContext('2d');
const myChart = new Chart(ctx, {
    type: 'bar',
    data: {
        labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255, 99, 132, 1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            y: {
                beginAtZero: true
            }
        }
    }
});
</script>

總結

通過本教程，你已經學會了如何在 Marp 中實現幻燈片的交互性。Marp 結合 Markdown 的簡潔性和 HTML、JavaScript 的靈活性，使得 PPT 的制作變得更加直觀和高效。繼續探索 Marp 的更多功能，結合這些交互性技巧，制作出更加生動、互動性強的演示文稿吧！

---

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

參考資料：

• Marp 官方文檔
• Marp for VS Code 插件文檔
• Chart.js 官方文檔