html-to-ppt

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

HTML/Markdown to PowerPoint Skill

HTML/Markdown转PowerPoint技能

Overview

概述

This skill enables conversion from Markdown or HTML to professional PowerPoint presentations using Marp (Markdown Presentation Ecosystem). Create beautiful, consistent slides using simple Markdown syntax with CSS-based themes.

本技能可借助Marp（Markdown演示文稿生态系统）将Markdown或HTML转换为专业的PowerPoint演示文稿。使用简洁的Markdown语法结合基于CSS的主题，创建美观、风格统一的幻灯片。

How to Use

使用方法

Provide Markdown content structured for slides
Optionally specify a theme or custom styling
I'll convert it to PowerPoint, PDF, or HTML slides

Example prompts:

"Convert this markdown to a PowerPoint presentation"
"Create slides from this outline using Marp"
"Turn my notes into a presentation with the gaia theme"
"Generate a PDF slide deck from this markdown"

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

示例提示：

"将此Markdown转换为PowerPoint演示文稿"
"使用Marp根据此大纲创建幻灯片"
"使用gaia主题将我的笔记转换为演示文稿"
"从此Markdown生成PDF幻灯片文档"

Domain Knowledge

领域知识

Marp Fundamentals

Marp基础知识

Marp uses a simple syntax where

---

separates slides:

markdown

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

Marp使用简单的语法，用

---

分隔幻灯片：

markdown

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

Slide 1 Title

Content for first slide

Slide 2 Title

Content for second slide

undefined

Content for second slide

undefined

Command Line Usage

命令行使用方法

bash

undefined

bash

undefined

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

undefined

marp slides.md --theme gaia -o presentation.pptx

undefined

Slide Structure

幻灯片结构

Basic Slide

基础幻灯片

markdown

---
marp: true
---

markdown

---
marp: true
---

Title

Bullet point 1
Bullet point 2
Bullet point 3

undefined

Bullet point 1
Bullet point 2
Bullet point 3

undefined

Title Slide

标题幻灯片

markdown

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

markdown

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

Presentation Title

Subtitle

Author Name Date

undefined

Author Name Date

undefined

Frontmatter Options

前置配置选项

yaml

---
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')
---

yaml

---
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')
---

Themes

主题

Built-in Themes

内置主题

markdown

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

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

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

markdown

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

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

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

Theme Classes

主题类

markdown

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

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

markdown

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

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

Formatting

格式设置

Text Styling

文本样式

markdown

undefined

markdown

undefined

Heading 1

Heading 2

Bold text and italic text

inline code

Blockquote for emphasis

undefined

Bold text and italic text

inline code

Blockquote for emphasis

undefined

Lists

列表

markdown

- Unordered item
- Another item
  - Nested item

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

markdown

- Unordered item
- Another item
  - Nested item

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

Code Blocks

代码块

markdown

undefined

markdown

undefined

Code Example

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

undefined

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

undefined

Tables

表格

markdown

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

markdown

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

Images

图片

Basic Image

基础图片

markdown

![](image.png)

markdown

![](image.png)

Sized Image

指定尺寸的图片

markdown

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

markdown

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

Background Image

背景图片

markdown

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

markdown

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

Slide with Background

undefined

undefined

Advanced Layout

高级布局

Two Columns

双列布局

markdown

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

markdown

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

Two Column Layout

Left Column

Point 1
Point 2

</div> <div>

Point 1
Point 2

</div> <div>

Right Column

Point A
Point B

</div> </div> ```

Point A
Point B

</div> </div> ```

Split Background

分割背景

markdown

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

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

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

markdown

---
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)

局部指令（单张幻灯片）

markdown

---
marp: true
---

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

markdown

---
marp: true
---

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

Special Slide

undefined

undefined

Scoped Styles

作用域样式

markdown

---
marp: true
---

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

markdown

---
marp: true
---

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

This Title is Red

undefined

undefined

Python Integration

Python集成

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)

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')

undefined

Topic 1
Topic 2
Topic 3 """

markdown_to_pptx(md, 'presentation.pptx')

undefined

Node.js/marp-cli API

javascript

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

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

javascript

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

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

Best Practices

最佳实践

One Idea Per Slide: Keep slides focused
Use Visual Hierarchy: Consistent heading levels
Limit Text: 6 bullets max per slide
Include Images: Visual content enhances retention
Test Output: Preview before final export

每张幻灯片一个核心观点：保持幻灯片内容聚焦
使用视觉层次：统一标题层级
限制文本数量：每张幻灯片最多6个项目符号
加入图片：视觉内容提升记忆点
测试输出结果：最终导出前先预览

Common Patterns

常见模式

Presentation Generator

演示文稿生成器

python

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 -->

python

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"""---

{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<!-- Notes: {section['notes']} -->\n"

md_content += """---

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

    if section.get('notes'):
        md_content += f"\n<!-- Notes: {section['notes']} -->\n"

md_content += """---

Thank You!

Questions? """

return markdown_to_pptx(md_content, output_path, theme)

undefined

Questions? """

return markdown_to_pptx(md_content, output_path, theme)

undefined

Batch Slide Generation

批量幻灯片生成

python

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)

python

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

示例

Example 1: Tech Presentation

示例1：技术演示文稿

markdown

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

markdown

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

API Documentation

REST API Best Practices

Engineering Team January 2024

Agenda

Authentication
Endpoints Overview
Error Handling
Rate Limiting
Examples

Authentication
Endpoints Overview
Error Handling
Rate Limiting
Examples

Authentication

All requests require an API key:

http

Authorization: Bearer YOUR_API_KEY

Keys expire after 90 days
Store securely, never commit to git
Rotate regularly

All requests require an API key:

http

Authorization: Bearer YOUR_API_KEY

Keys expire after 90 days
Store securely, never commit to git
Rotate regularly

Endpoints Overview

Method	Endpoint	Description
GET	/users	List all users
POST	/users	Create user
GET	/users/:id	Get user details
PUT	/users/:id	Update user
DELETE	/users/:id	Delete user

Method	Endpoint	Description
GET	/users	List all users
POST	/users	Create user
GET	/users/:id	Get user details
PUT	/users/:id	Update user
DELETE	/users/:id	Delete user

Error Handling

json

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

json

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

Questions?

api-support@company.com

undefined

api-support@company.com

undefined

Example 2: Business Pitch

示例2：商业推介

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 -->

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"""

{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')})

{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']}

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']}

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%

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

{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': 'founders@techstartup.com' }

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

undefined

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

undefined

Limitations

局限性

Complex animations not supported
Some PowerPoint-specific features unavailable
Custom fonts require CSS configuration
Video embedding limited
Speaker notes have basic support

不支持复杂动画
部分PowerPoint专属功能无法使用
自定义字体需要CSS配置
视频嵌入受限
演讲者笔记仅支持基础功能

Installation

安装方法

bash

undefined

bash

undefined

Using npm

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

Using Homebrew

brew install marp-cli

Verify installation

marp --version

undefined

marp --version

undefined