html-to-ppt

HTML/Markdown 转 PowerPoint 技能

概述

此技能可使用 Marp（Markdown Presentation Ecosystem）将 Markdown 或 HTML 转换为专业的 PowerPoint 演示文稿。使用简单的 Markdown 语法和基于 CSS 的主题，制作精美且风格统一的幻灯片。

使用方法

1. 提供按幻灯片结构编排的 Markdown 内容
2. 可选择指定主题或自定义样式
3. 我会将其转换为 PowerPoint、PDF 或 HTML 幻灯片

示例提示词：

• “将此 Markdown 转换为 PowerPoint 演示文稿”
• “使用 Marp 根据此大纲制作幻灯片”
• “使用 gaia 主题将我的笔记制作成演示文稿”
• “根据此 Markdown 生成 PDF 幻灯片”

领域知识

Marp 基础知识

Marp 使用简单语法，以 --- 分隔幻灯片：

---
marp: true
theme: default
---

# Slide 1 Title

Content for first slide

---

# Slide 2 Title

Content for second slide

命令行用法

# Convert to PowerPoint
marp slides.md -o presentation.pptx

# Convert to PDF
marp slides.md -o presentation.pdf

# Convert to HTML
marp slides.md -o presentation.html

# With specific theme
marp slides.md --theme gaia -o presentation.pptx

幻灯片结构

基本幻灯片

---
marp: true
---

# Title

- Bullet point 1
- Bullet point 2
- Bullet point 3

标题幻灯片

---
marp: true
theme: gaia
class: lead
---

# Presentation Title

## Subtitle

Author Name
Date

Frontmatter 选项

---
marp: true
theme: default          # default, gaia, uncover
size: 16:9              # 4:3, 16:9, or custom
paginate: true          # Show page numbers
header: 'Company Name'  # Header text
footer: 'Confidential'  # Footer text
backgroundColor: #fff
backgroundImage: url('bg.png')
---

主题

内置主题

---
marp: true
theme: default   # Clean, minimal
---

---
marp: true
theme: gaia      # Colorful, modern
---

---
marp: true
theme: uncover   # Bold, presentation-focused
---

主题类

---
marp: true
theme: gaia
class: lead     # Centered title slide
---

---
marp: true
theme: gaia
class: invert   # Inverted colors
---

格式设置

文本样式

# Heading 1
## Heading 2

**Bold text** and *italic text*

`inline code`

> Blockquote for emphasis

列表

- Unordered item
- Another item
  - Nested item

1. Ordered item
2. Second item
   1. Nested numbered

代码块

# Code Example

\`\`\`python
def hello():
    print("Hello, World!")
\`\`\`

表格

| Feature | Status |
|---------|--------|
| Tables  | ✅     |
| Charts  | ✅     |
| Images  | ✅     |

图片

基本图片

![](image.png)

调整尺寸的图片

![width:500px](image.png)
![height:300px](image.png)
![width:80%](image.png)

背景图片

---
marp: true
backgroundImage: url('background.jpg')
---

# Slide with Background

高级布局

双栏

---
marp: true
style: |
  .columns {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }
---

# Two Column Layout

<div class="columns">
<div>

## Left Column
- Point 1
- Point 2

</div>
<div>

## Right Column
- Point A
- Point B

</div>
</div>

分割背景

---
marp: true
theme: gaia
class: gaia
---



<div class="columns">
<div style="color: white;">

# Dark Side

</div>
<div>

# Light Side

</div>
</div>

指令

局部指令（每张幻灯片）

---
marp: true
---



# Special Slide

作用域样式

---
marp: true
---

<style scoped>
h1 {
  color: red;
}
</style>

# This Title is Red

Python 集成

import subprocess
import tempfile
import os

def markdown_to_pptx(md_content, output_path, theme='default'):
    """Convert Markdown to PowerPoint using Marp."""
    
    # Add marp directive if not present
    if '---\nmarp: true' not in md_content:
        md_content = f"---\nmarp: true\ntheme: {theme}\n---\n\n" + md_content
    
    # Write to temp file
    with tempfile.NamedTemporaryFile(mode='w', suffix='.md', delete=False) as f:
        f.write(md_content)
        temp_path = f.name
    
    try:
        # Convert using marp
        subprocess.run([
            'marp', temp_path, '-o', output_path
        ], check=True)
        
        return output_path
    finally:
        os.unlink(temp_path)

# Usage
md = """
# Welcome

Introduction slide

---

# Agenda

- Topic 1
- Topic 2
- Topic 3
"""

markdown_to_pptx(md, 'presentation.pptx')

Node.js/marp-cli API

const { marpCli } = require('@marp-team/marp-cli');

// Convert file
marpCli(['slides.md', '-o', 'output.pptx']).then(exitCode => {
    console.log('Done:', exitCode);
});

最佳实践

1. 每张幻灯片讲一个要点：让幻灯片聚焦
2. 使用视觉层次：统一标题级别
3. 限制文本量：每张幻灯片最多 6 个项目符号
4. 添加图片：视觉内容有助于增强记忆
5. 测试输出：最终导出前先预览

常见模式

演示文稿生成器

def create_presentation(title, sections, output_path, theme='gaia'):
    """Generate presentation from structured data."""
    
    md_content = f"""---
marp: true
theme: {theme}
paginate: true
---



# {title}

{sections.get('subtitle', '')}

{sections.get('author', '')}

"""
    
    for section in sections.get('slides', []):
        md_content += f"""---

# {section['title']}

"""
        for point in section.get('points', []):
            md_content += f"- {point}\n"
        
        if section.get('notes'):
            md_content += f"\n\n"
    
    md_content += """---



# Thank You!

Questions?
"""
    
    return markdown_to_pptx(md_content, output_path, theme)

批量生成幻灯片

def generate_report_slides(data_list, template, output_dir):
    """Generate multiple presentations from data."""
    import os
    
    for data in data_list:
        content = template.format(**data)
        output_path = os.path.join(output_dir, f"{data['name']}_report.pptx")
        markdown_to_pptx(content, output_path)

示例

示例 1：科技演示文稿

---
marp: true
theme: gaia
class: lead
paginate: true
---

# API Documentation

## REST API Best Practices

Engineering Team
January 2024

---

# Agenda

1. Authentication
2. Endpoints Overview
3. Error Handling
4. Rate Limiting
5. Examples

---

# Authentication

All requests require an API key:

```http
Authorization: Bearer YOUR_API_KEY

• 密钥在 90 天后过期
• 安全存储，切勿提交到 git
• 定期轮换

---

端点概览

方法	端点	说明
GET	/users	列出所有用户
POST	/users	创建用户
GET	/users/:id	获取用户详情
PUT	/users/:id	更新用户
DELETE	/users/:id	删除用户

---

错误处理

{
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "Invalid email format",
    "details": ["email must be valid"]
  }
}

---

有问题吗？

[email protected]

### Example 2: Business Pitch
```python
def create_pitch_deck(company_data):
    """Generate investor pitch deck."""
    
    md = f"""---
marp: true
theme: uncover
paginate: true
---





# {company_data['name']}

{company_data['tagline']}

---

# The Problem

{company_data['problem_statement']}

**Market Pain Points:**
"""
    
    for pain in company_data['pain_points']:
        md += f"- {pain}\n"
    
    md += f"""
---

# Our Solution

{company_data['solution']}

![width:600px]({company_data.get('product_image', 'product.png')})

---

# Market Opportunity

- **TAM:** {company_data['tam']}
- **SAM:** {company_data['sam']}
- **SOM:** {company_data['som']}

---

# Traction

| Metric | Value |
|--------|-------|
| Monthly Revenue | {company_data['mrr']} |
| Customers | {company_data['customers']} |
| Growth Rate | {company_data['growth']} |

---

# The Ask

**Seeking:** {company_data['funding_ask']}

**Use of Funds:**
- Product Development: 40%
- Sales & Marketing: 35%
- Operations: 25%

---



# Let's Build the Future Together

{company_data['contact']}
"""
    
    return md

# Generate deck
pitch_data = {
    'name': 'TechStartup Inc',
    'tagline': 'AI-Powered Document Processing',
    'problem_statement': 'Businesses waste 20% of time on manual document work',
    'pain_points': ['Manual data entry', 'Error-prone processes', 'Slow turnaround'],
    'solution': 'Automated document processing with 99.5% accuracy',
    'tam': '$50B',
    'sam': '$10B',
    'som': '$500M',
    'mrr': '$100K',
    'customers': '50',
    'growth': '20% MoM',
    'funding_ask': '$5M Series A',
    'contact': '[email protected]'
}

md_content = create_pitch_deck(pitch_data)
markdown_to_pptx(md_content, 'pitch_deck.pptx', theme='uncover')

限制

• 不支持复杂动画
• 部分 PowerPoint 专属功能不可用
• 自定义字体需要配置 CSS
• 视频嵌入功能有限
• 仅基本支持演讲者备注

安装

# Using npm
npm install -g @marp-team/marp-cli

# Using Homebrew
brew install marp-cli

# Verify installation
marp --version

资源

• Marp 文档
• Marp CLI GitHub
• Marpit 框架
• 主题 CSS 指南