HTML/Markdown 转 PowerPoint 技能 (HTML/Markdown to PowerPoint Skill)

概述 (Overview)

此技能支持使用 Marp（Markdown 演示生态系统）将 Markdown 或 HTML 转换为专业的 PowerPoint 演示文稿。使用简单的 Markdown 语法和基于 CSS 的主题创建美观、一致的幻灯片。

使用方法 (How to Use)

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

示例提示 (Example prompts):

• “将此 markdown 转换为 PowerPoint 演示文稿”
• “使用 Marp 从该大纲创建幻灯片”
• “将我的笔记转换为使用 gaia 主题的演示文稿”
• “从此 markdown 生成 PDF 幻灯片集”

领域知识 (Domain Knowledge)

Marp 基础知识 (Marp Fundamentals)

Marp 使用简单的语法，其中 --- 分隔幻灯片：

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

# 幻灯片 1 标题 (Slide 1 Title)

第一张幻灯片的内容 (Content for first slide)

---

# 幻灯片 2 标题 (Slide 2 Title)

第二张幻灯片的内容 (Content for second slide)

命令行用法 (Command Line Usage)

# 转换为 PowerPoint (Convert to PowerPoint)
marp slides.md -o presentation.pptx

# 转换为 PDF (Convert to PDF)
marp slides.md -o presentation.pdf

# 转换为 HTML (Convert to HTML)
marp slides.md -o presentation.html

# 使用特定主题 (With specific theme)
marp slides.md --theme gaia -o presentation.pptx

幻灯片结构 (Slide Structure)

基础幻灯片 (Basic Slide)

---
marp: true
---

# 标题 (Title)

- 项目符号 1 (Bullet point 1)
- 项目符号 2 (Bullet point 2)
- 项目符号 3 (Bullet point 3)

标题幻灯片 (Title Slide)

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

# 演示文稿标题 (Presentation Title)

## 副标题 (Subtitle)

作者姓名 (Author Name)
日期 (Date)

前置元数据选项 (Frontmatter Options)

---
marp: true
theme: default          # default, gaia, uncover
size: 16:9              # 4:3, 16:9, 或自定义 (or custom)
paginate: true          # 显示页码 (Show page numbers)
header: '公司名称'  # 页眉文本 (Header text)
footer: '机密'  # 页脚文本 (Footer text)
backgroundColor: #fff
backgroundImage: url('bg.png')
---

主题 (Themes)

内置主题 (Built-in Themes)

---
marp: true
theme: default   # 简洁、极简 (Clean, minimal)
---

---
marp: true
theme: gaia      # 多彩、现代 (Colorful, modern)
---

---
marp: true
theme: uncover   # 醒目、以演示为重点 (Bold, presentation-focused)
---

主题类 (Theme Classes)

---
marp: true
theme: gaia
class: lead     # 居中的标题幻灯片 (Centered title slide)
---

---
marp: true
theme: gaia
class: invert   # 反转颜色 (Inverted colors)
---

格式设置 (Formatting)

文本样式 (Text Styling)

# 标题 1 (Heading 1)
## 标题 2 (Heading 2)

**粗体文本** 和 *斜体文本* (**Bold text** and *italic text*)

`内联代码 (inline code)`

> 用于强调的引用块 (Blockquote for emphasis)

列表 (Lists)

- 无序项目 (Unordered item)
- 另一个项目 (Another item)
  - 嵌套项目 (Nested item)

1. 有序项目 (Ordered item)
2. 第二个项目 (Second item)
   1. 嵌套编号 (Nested numbered)

代码块 (Code Blocks)

# 代码示例 (Code Example)

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

表格 (Tables)

| 功能 (Feature) | 状态 (Status) |
|---------|--------|
| 表格 (Tables)  | ✅     |
| 图表 (Charts)  | ✅     |
| 图片 (Images)  | ✅     |

图片 (Images)

基础图片 (Basic Image)

![](image.png)

指定尺寸的图片 (Sized Image)

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

背景图片 (Background Image)

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

# 带背景的幻灯片 (Slide with Background)

高级布局 (Advanced Layout)

两列布局 (Two Columns)

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

# 两列布局 (Two Column Layout)

<div class="columns">
<div>

## 左列 (Left Column)
- 要点 1 (Point 1)
- 要点 2 (Point 2)

</div>
<div>

## 右列 (Right Column)
- 要点 A (Point A)
- 要点 B (Point B)

</div>
</div>

分割背景 (Split Background)

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

<!-- 
_backgroundImage: linear-gradient(to right, #4a90a4, #4a90a4 50%, white 50%)
-->

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

# 暗色面 (Dark Side)

</div>
<div>

# 亮色面 (Light Side)

</div>
</div>

指令 (Directives)

局部指令（每张幻灯片）(Local Directives – per slide)

---
marp: true
---

<!-- 
_backgroundColor: #123
_color: white
_paginate: false
-->

# 特殊幻灯片 (Special Slide)

作用域样式 (Scoped Styles)

---
marp: true
---

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

# 此标题为红色 (This Title is Red)

Python 集成 (Python Integration)

import subprocess
import tempfile
import os

def markdown_to_pptx(md_content, output_path, theme='default'):
    """使用 Marp 将 Markdown 转换为 PowerPoint (Convert Markdown to PowerPoint using Marp)."""
    
    # 如果不存在则添加 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:
        # 使用 marp 转换 (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)

- 主题 1 (Topic 1)
- 主题 2 (Topic 2)
- 主题 3 (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('完成:', exitCode);
});

最佳实践 (Best Practices)

1. 一页一概念 (One Idea Per Slide)：保持幻灯片聚焦
2. 使用视觉层次 (Use Visual Hierarchy)：一致的标题级别
3. 限制文本 (Limit Text)：每张幻灯片最多 6 个项目符号
4. 包含图片 (Include Images)：视觉内容增强记忆
5. 测试输出 (Test Output)：最终导出前预览

常见模式 (Common Patterns)

演示文稿生成器 (Presentation Generator)

def create_presentation(title, sections, output_path, theme='gaia'):
    """从结构化数据生成演示文稿 (Generate presentation from structured data)."""
    
    md_content = f"""---
marp: true
theme: {theme}
paginate: true
---

<!-- _class: lead -->

# {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<!-- 备注: {section['notes']} -->\n"
    
    md_content += """---

<!-- _class: lead -->

# 谢谢！(Thank You!)

有问题吗？(Questions?)
"""
    
    return markdown_to_pptx(md_content, output_path, theme)

批量幻灯片生成 (Batch Slide Generation)

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)

示例 (Examples)

示例 1：技术演示 (Example 1: Tech Presentation)

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

# API 文档 (API Documentation)

## REST API 最佳实践 (REST API Best Practices)

工程团队 (Engineering Team)
2024 年 1 月 (January 2024)

---

# 议程 (Agenda)

1. 认证 (Authentication)
2. 端点概览 (Endpoints Overview)
3. 错误处理 (Error Handling)
4. 限流 (Rate Limiting)
5. 示例 (Examples)

---

# 认证 (Authentication)

所有请求都需要 API 密钥 (All requests require an API key):

```http
Authorization: Bearer YOUR_API_KEY

• 密钥有效期为 90 天 (Keys expire after 90 days)
• 安全存储，切勿提交到 git (Store securely, never commit to git)
• 定期轮换 (Rotate regularly)

端点概览 (Endpoints Overview)

错误处理 (Error Handling)

{
  "error": {
    "code": "VALIDATION_ERROR",
    "message": "邮箱格式无效 (Invalid email format)",
    "details": ["邮箱必须有效 (email must be valid)"]
  }
}

问题？(Questions?)

api-support@company.com

### 示例 2：商业融资演示 (Example 2: Business Pitch)
```python
def create_pitch_deck(company_data):
    """生成投资者融资演示文稿 (Generate investor pitch deck)."""
    
    md = f"""---
marp: true
theme: uncover
paginate: true
---

<!-- _class: lead -->
<!-- _backgroundColor: #2d3748 -->
<!-- _color: white -->

# {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%

---

<!-- _class: lead -->

# 让我们一起构建未来 (Let's Build the Future Together)

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

# 生成演示文稿 (Generate deck)
pitch_data = {
    'name': 'TechStartup Inc',
    'tagline': 'AI 驱动的文档处理 (AI-Powered Document Processing)',
    'problem_statement': '企业将 20% 的时间浪费在手动文档工作上 (Businesses waste 20% of time on manual document work)',
    'pain_points': ['手动数据录入 (Manual data entry)', '易出错的过程 (Error-prone processes)', '处理周期长 (Slow turnaround)'],
    'solution': '自动化文档处理，准确率 99.5% (Automated document processing with 99.5% accuracy)',
    'tam': '$500 亿 (50B)',
    'sam': '$100 亿 (10B)',
    'som': '$50 亿 (5B)',
    'mrr': '$10 万 (100K)',
    'customers': '50',
    'growth': '20% 月环比 (MoM)',
    'funding_ask': '$500 万 A 轮 (5M Series A)',
    'contact': 'founders@techstartup.com'
}

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

局限性 (Limitations)

• 不支持复杂动画 (Complex animations not supported)
• 某些 PowerPoint 特定功能不可用 (Some PowerPoint-specific features unavailable)
• 自定义字体需要 CSS 配置 (Custom fonts require CSS configuration)
• 视频嵌入有限 (Video embedding limited)
• 演讲者备注支持基础功能 (Speaker notes have basic support)

安装 (Installation)

# 使用 npm (Using npm)
npm install -g @marp-team/marp-cli

# 使用 Homebrew (Using Homebrew)
brew install marp-cli

# 验证安装 (Verify installation)
marp --version

资源 (Resources)

• Marp 文档 (Marp Documentation)
• Marp CLI GitHub
• Marpit 框架 (Marpit Framework)
• 主题 CSS 指南 (Theme CSS Guide)