Back to Details

markdown-presentation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Markdown Presentation Skill

Markdown演示文稿制作技能

Create professional, presenter-friendly markdown presentations with timing guidance, expandable details, and clean visual hierarchy.
创建专业、适合演讲者使用的Markdown演示文稿，包含计时指引、可展开详情和清晰的视觉层级。

When to Use This Skill

何时使用此技能

  • Creating team onboarding presentations
  • Technical architecture overviews
  • Knowledge transfer sessions
  • Sprint demos or retrospectives
  • Any presentation that will be viewed in markdown-capable viewers (GitHub, VS Code, Obsidian)
  • 创建团队入职培训演示文稿
  • 技术架构概述
  • 知识转移会议
  • 迭代演示或回顾会议
  • 任何将在支持Markdown的查看器（GitHub、VS Code、Obsidian）中展示的演示文稿

Presentation Structure

演示文稿结构

Standard Template

标准模板

markdown
undefined
markdown
undefined

Presentation Title

演示文稿标题

Subtitle or Context

副标题或背景说明

Duration: X minutes Audience: Target audience Date: YYYY-MM-DD
时长： X分钟 受众： 目标人群 日期： YYYY-MM-DD

Agenda

议程

  1. Topic 1 (X min)
  2. Topic 2 (X min)
  3. Topic 3 (X min) ...
  1. 主题1（X分钟）
  2. 主题2（X分钟）
  3. 主题3（X分钟） ...

1. First Section

1. 第一章节

Content here...
内容在此...

2. Second Section

2. 第二章节

Content here...
内容在此...

Questions?

问答环节？

Contact

联系方式

  • Channel/email
  • Resources
Presentation created: YYYY-MM-DD Built with markdown-presentation@plinde/claude-plugins
undefined
  • 沟通渠道/邮箱
  • 参考资源
演示文稿创建时间：YYYY-MM-DD 使用 markdown-presentation@plinde/claude-plugins 制作
undefined

Key Formatting Patterns

关键格式规范

Horizontal Rules as Slide Breaks

用水平分隔线作为幻灯片分隔符

Use 
---
to create visual "slide" breaks between sections:
markdown
undefined
使用 
---
在章节之间创建视觉上的“幻灯片”分隔：
markdown
undefined

Section 1

章节1

Content...
内容...

Section 2

章节2

Content...
undefined
内容...
undefined

Expandable Details for Dense Content

用可展开详情展示密集内容

Use HTML 
<details>
tags for content that's too long for a single "slide":
markdown
<details>
<summary><b>📋 Click to expand detailed info</b></summary>

Long content here...
- Bullet points
- Code blocks
- Tables

</details>
Best Practices for Details:
  • Use emoji + bold for visual distinction: 
    <b>📋 Title</b>
  • Keep summary text short and descriptive
  • Use for: command references, configuration examples, troubleshooting guides
  • Don't use for: critical information that everyone must see
对于单张“幻灯片”无法容纳的内容，使用HTML 
<details>
标签：
markdown
<details>
<summary><b>📋 点击展开详细信息</b></summary>

此处为长内容...
- 项目符号
- 代码块
- 表格

</details>
详情使用最佳实践：
  • 使用表情符号+粗体实现视觉区分：
    <b>📋 标题</b>
  • 摘要文本保持简短且描述性强
  • 适用场景：命令参考、配置示例、故障排除指南
  • 不适用场景：所有人必须查看的关键信息

Timing Annotations

计时标注

Include timing in the agenda to help presenters pace themselves:
markdown
undefined
在议程中添加计时信息，帮助演讲者把控节奏：
markdown
undefined

Agenda

议程

  1. Introduction (2 min)
  2. Architecture Overview (5 min)
  3. Demo (8 min)
  4. Q&A (5 min)
Total: 20 minutes
undefined
  1. 介绍（2分钟）
  2. 架构概述（5分钟）
  3. 演示（8分钟）
  4. 问答（5分钟）
总时长：20分钟
undefined

ASCII Diagrams (Markdown Only)

ASCII图表（仅Markdown环境）

Use ASCII art for architecture diagrams in pure markdown contexts (GitHub, VS Code preview):
markdown
undefined
┌─────────────┐ ┌─────────────┐ │ Source │────▶│ Processor │ └─────────────┘ └──────┬──────┘ │ ▼ ┌─────────────┐ │ Output │ └─────────────┘
undefined
ASCII Box Drawing Characters:
  • Corners: 
    ┌ ┐ └ ┘
  • Lines: 
    ─ │
  • Connectors: 
    ├ ┤ ┬ ┴ ┼
  • Arrows: 
    ▶ ▼ ◀ ▲ → ← ↑ ↓
Warning: ASCII diagrams often have alignment issues in HTML output due to font rendering. For HTML presentations, use HTML tables/divs instead (see HTML Presentations section below).
在纯Markdown场景（GitHub、VS Code预览）中，使用ASCII图展示架构：
markdown
undefined
┌─────────────┐ ┌─────────────┐ │ 数据源 │────▶│ 处理器 │ └─────────────┘ └──────┬──────┘ │ ▼ ┌─────────────┐ │ 输出 │ └─────────────┘
undefined
ASCII框绘制字符：
  • 角落：
    ┌ ┐ └ ┘
  • 线条：
    ─ │
  • 连接符：
    ├ ┤ ┬ ┴ ┼
  • 箭头：
    ▶ ▼ ◀ ▲ → ← ↑ ↓
注意： 由于字体渲染差异，ASCII图表在HTML输出中常出现对齐问题。对于HTML演示文稿，请改用HTML表格/ div（见下方HTML演示文稿章节）。

Tables for Comparisons

用表格进行对比

markdown
| Feature | Option A | Option B |
|---------|----------|----------|
| Speed   | Fast     | Slow     |
| Cost    | High     | Low      |
markdown
| 特性 | 选项A | 选项B |
|---------|----------|----------|
| 速度 | 快 | 慢 |
| 成本 | 高 | 低 |

Quick Reference Cards

快速参考卡片

End presentations with a quick reference section:
markdown
undefined
在演示文稿末尾添加快速参考章节：
markdown
undefined

Quick Reference Card

快速参考卡片

Key Commands

关键命令

CommandPurpose
cmd1
Does X
cmd2
Does Y
命令用途
cmd1
执行X操作
cmd2
执行Y操作

Important Links

重要链接

  • Doc 1
  • Doc 2
undefined
  • 文档1
  • 文档2
undefined

Presentation Length Guidelines

演示文稿长度指南

DurationSlides/SectionsContent Depth
5 min3-5Overview only
15 min6-10Key concepts + examples
30 min10-15Deep dive with demos
60 min15-25Comprehensive with exercises
Rule of thumb: ~2 minutes per major section (excluding expandable details)
时长幻灯片/章节数量内容深度
5分钟3-5仅概述
15分钟6-10核心概念+示例
30分钟10-15深度解析+演示
60分钟15-25全面内容+练习
经验法则： 每个主要章节约2分钟（不含可展开详情）

Viewing Options

查看方式

VS Code

VS Code

bash
code presentation.md
bash
code presentation.md

Use Ctrl+Shift+V (or Cmd+Shift+V) for preview

使用Ctrl+Shift+V（或Cmd+Shift+V）预览

undefined
undefined

GitHub

GitHub

  • Push to repo, view in browser
  • Details sections render as expandable
  • 推送到仓库，在浏览器中查看
  • 详情章节会渲染为可展开形式

Obsidian

Obsidian

  • Open in vault
  • Use presentation plugins for slideshow mode
  • 在库中打开
  • 使用演示文稿插件进入幻灯片模式

Marp (CLI)

Marp（CLI）

Convert to actual slides:
bash
marp presentation.md -o presentation.pdf
marp presentation.md -o presentation.html
转换为实际幻灯片：
bash
marp presentation.md -o presentation.pdf
marp presentation.md -o presentation.html

HTML Presentations

HTML演示文稿

For presentations that will be viewed primarily in browsers, consider using HTML instead of pure markdown. HTML provides better control over styling and diagram alignment.
对于主要在浏览器中查看的演示文稿，考虑使用HTML而非纯Markdown。HTML能更好地控制样式和图表对齐。

When to Use HTML vs Markdown

何时使用HTML vs Markdown

Use CaseFormatReason
GitHub/GitLab viewingMarkdownNative rendering
Browser presentationsHTMLFull CSS control
Complex diagramsHTMLPrecise alignment
Print/PDF exportEitherMarp for MD, browser for HTML
Slideshow modeMarkdown + MarpBetter tooling
使用场景格式原因
GitHub/GitLab查看Markdown原生渲染
浏览器演示文稿HTML完整CSS控制
复杂图表HTML精确对齐
打印/PDF导出两者均可Markdown用Marp，HTML用浏览器
幻灯片模式Markdown + Marp更优工具支持

Dark Theme CSS Template

深色主题CSS模板

Use CSS variables for consistent theming (Tokyo Night-inspired palette):
css
:root {
    --bg-primary: #1a1b26;
    --bg-secondary: #24283b;
    --bg-tertiary: #1f2335;
    --text-primary: #c0caf5;
    --text-secondary: #a9b1d6;
    --text-muted: #565f89;
    --accent-blue: #7aa2f7;
    --accent-teal: #73daca;
    --accent-purple: #bb9af7;
    --accent-amber: #e0af68;
    --accent-green: #9ece6a;
    --accent-coral: #f7768e;
    --border-color: #3b4261;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

pre, code {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

h1, h2, h3 { color: var(--accent-blue); }
a { color: var(--accent-teal); }
使用CSS变量实现一致主题（灵感来自Tokyo Night）：
css
:root {
    --bg-primary: #1a1b26;
    --bg-secondary: #24283b;
    --bg-tertiary: #1f2335;
    --text-primary: #c0caf5;
    --text-secondary: #a9b1d6;
    --text-muted: #565f89;
    --accent-blue: #7aa2f7;
    --accent-teal: #73daca;
    --accent-purple: #bb9af7;
    --accent-amber: #e0af68;
    --accent-green: #9ece6a;
    --accent-coral: #f7768e;
    --border-color: #3b4261;
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

pre, code {
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
}

h1, h2, h3 { color: var(--accent-blue); }
a { color: var(--accent-teal); }

HTML Diagrams (Replace ASCII)

HTML图表（替代ASCII）

Problem: ASCII art alignment breaks in HTML due to font rendering differences.
Solution: Use HTML divs with flexbox or tables with defined widths.
问题： 由于字体渲染差异，ASCII图表在HTML中会出现对齐问题。
解决方案： 使用带flexbox的HTML div或定义宽度的表格。

Architecture Box Pattern

架构框模式

html
<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
    <div style="border: 2px solid var(--accent-teal); border-radius: 8px;
                padding: 15px; min-width: 200px; background: rgba(115,218,202,0.1);">
        <strong style="color: var(--accent-teal);">Component A</strong>
        <ul><li>Feature 1</li><li>Feature 2</li></ul>
    </div>
    <div style="border: 2px solid var(--accent-purple); border-radius: 8px;
                padding: 15px; min-width: 200px; background: rgba(187,154,247,0.1);">
        <strong style="color: var(--accent-purple);">Component B</strong>
        <ul><li>Feature 1</li><li>Feature 2</li></ul>
    </div>
</div>
html
<div style="display: flex; gap: 20px; justify-content: center; flex-wrap: wrap;">
    <div style="border: 2px solid var(--accent-teal); border-radius: 8px;
                padding: 15px; min-width: 200px; background: rgba(115,218,202,0.1);">
        <strong style="color: var(--accent-teal);">组件A</strong>
        <ul><li>特性1</li><li>特性2</li></ul>
    </div>
    <div style="border: 2px solid var(--accent-purple); border-radius: 8px;
                padding: 15px; min-width: 200px; background: rgba(187,154,247,0.1);">
        <strong style="color: var(--accent-purple);">组件B</strong>
        <ul><li>特性1</li><li>特性2</li></ul>
    </div>
</div>

Flow Diagram Pattern (Flexbox)

流程图模式（Flexbox）

html
<div style="display: flex; align-items: center; justify-content: center;
            gap: 10px; flex-wrap: wrap; padding: 20px;">
    <div style="background: var(--accent-blue); color: var(--bg-primary);
                padding: 10px 20px; border-radius: 8px;">
        <strong>Step 1</strong>
    </div>
    <span style="color: var(--accent-teal); font-size: 1.5em;">→</span>
    <div style="background: var(--accent-purple); color: var(--bg-primary);
                padding: 10px 20px; border-radius: 8px;">
        <strong>Step 2</strong>
    </div>
    <span style="color: var(--accent-teal); font-size: 1.5em;">→</span>
    <div style="background: var(--accent-green); color: var(--bg-primary);
                padding: 10px 20px; border-radius: 8px;">
        <strong>Step 3</strong>
    </div>
</div>
html
<div style="display: flex; align-items: center; justify-content: center;
            gap: 10px; flex-wrap: wrap; padding: 20px;">
    <div style="background: var(--accent-blue); color: var(--bg-primary);
                padding: 10px 20px; border-radius: 8px;">
        <strong>步骤1</strong>
    </div>
    <span style="color: var(--accent-teal); font-size: 1.5em;">→</span>
    <div style="background: var(--accent-purple); color: var(--bg-primary);
                padding: 10px 20px; border-radius: 8px;">
        <strong>步骤2</strong>
    </div>
    <span style="color: var(--accent-teal); font-size: 1.5em;">→</span>
    <div style="background: var(--accent-green); color: var(--bg-primary);
                padding: 10px 20px; border-radius: 8px;">
        <strong>步骤3</strong>
    </div>
</div>

Comparison Table Pattern

对比表格模式

html
<table style="width: 100%; border-collapse: collapse;">
    <thead>
        <tr style="background: var(--bg-secondary);">
            <th style="padding: 12px; border: 1px solid var(--border-color);">Feature</th>
            <th style="padding: 12px; border: 1px solid var(--border-color);">Option A</th>
            <th style="padding: 12px; border: 1px solid var(--border-color);">Option B</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="padding: 12px; border: 1px solid var(--border-color);">Speed</td>
            <td style="padding: 12px; border: 1px solid var(--border-color);
                       color: var(--accent-green);">Fast</td>
            <td style="padding: 12px; border: 1px solid var(--border-color);
                       color: var(--accent-coral);">Slow</td>
        </tr>
    </tbody>
</table>
html
<table style="width: 100%; border-collapse: collapse;">
    <thead>
        <tr style="background: var(--bg-secondary);">
            <th style="padding: 12px; border: 1px solid var(--border-color);">特性</th>
            <th style="padding: 12px; border: 1px solid var(--border-color);">选项A</th>
            <th style="padding: 12px; border: 1px solid var(--border-color);">选项B</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td style="padding: 12px; border: 1px solid var(--border-color);">速度</td>
            <td style="padding: 12px; border: 1px solid var(--border-color);
                       color: var(--accent-green);">快</td>
            <td style="padding: 12px; border: 1px solid var(--border-color);
                       color: var(--accent-coral);">慢</td>
        </tr>
    </tbody>
</table>

Color-Coded Components

颜色编码组件

Use consistent colors for related components throughout the presentation:
css
/* Example: Multi-environment architecture */
--env-production: #73daca;    /* teal - production */
--env-staging: #bb9af7;       /* purple - staging */
--env-development: #e0af68;   /* amber - development */
Apply with semi-transparent backgrounds for visual grouping:
html
<div style="border: 2px solid var(--env-production);
            background: rgba(115,218,202,0.1);
            border-radius: 8px; padding: 15px;">
    Production Environment Content
</div>
在整个演示文稿中，为相关组件使用一致的颜色：
css
/* 示例：多环境架构 */
--env-production: #73daca;    /* 蓝绿色 - 生产环境 */
--env-staging: #bb9af7;       /* 紫色 - 预发布环境 */
--env-development: #e0af68;   /* 琥珀色 - 开发环境 */
使用半透明背景实现视觉分组：
html
<div style="border: 2px solid var(--env-production);
            background: rgba(115,218,202,0.1);
            border-radius: 8px; padding: 15px;">
    生产环境内容
</div>

Example: Technical Onboarding

示例：技术入职培训

markdown
undefined
markdown
undefined

Service X Onboarding

服务X入职培训

For New Team Members

面向新团队成员

Duration: 15 minutes Audience: New engineers
时长： 15分钟 受众： 新工程师

Agenda

议程

  1. What is Service X? (2 min)
  2. Architecture (5 min)
  3. Local Development (5 min)
  4. Resources (3 min)
  1. 什么是服务X？（2分钟）
  2. 架构（5分钟）
  3. 本地开发（5分钟）
  4. 参考资源（3分钟）

1. What is Service X?

1. 什么是服务X？

Service X handles authentication for all internal tools.
Key Facts:
  • Processes 10M requests/day
  • 99.99% uptime SLA
  • Deployed in 3 regions
服务X负责所有内部工具的认证处理。
关键信息：
  • 每日处理1000万次请求
  • 99.99% 可用性SLA
  • 部署在3个区域

2. Architecture

2. 架构

┌──────────┐     ┌──────────┐     ┌──────────┐
│  Client  │────▶│ Service X│────▶│   IdP    │
└──────────┘     └──────────┘     └──────────┘
<details> <summary><b>📋 Component Details</b></summary>
Service X Components:
  • API Gateway (Kong)
  • Auth Service (Go)
  • Token Store (Redis)
  • Audit Logger (Kafka → ES)
</details> 
┌──────────┐     ┌──────────┐     ┌──────────┐
│  客户端  │────▶│ 服务X    │────▶│   身份提供商 │
└──────────┘     └──────────┘     └──────────┘
<details> <summary><b>📋 组件详情</b></summary>
服务X组件：
  • API网关（Kong）
  • 认证服务（Go）
  • 令牌存储（Redis）
  • 审计日志（Kafka → ES）
</details>

3. Local Development

3. 本地开发

bash
undefined
bash
undefined

Clone and setup

克隆并设置

git clone git@github.com:org/service-x.git cd service-x make setup
git clone git@github.com:org/service-x.git cd service-x make setup

Run locally

本地运行

make run
make run

Run tests

运行测试

make test

<details>
<summary><b>📋 Troubleshooting</b></summary>

**Port conflicts:**
```bash
lsof -i :8080
kill -9 <PID>
Database issues:
bash
make db-reset
</details>
make test

<details>
<summary><b>📋 故障排除</b></summary>

**端口冲突：**
```bash
lsof -i :8080
kill -9 <PID>
数据库问题：
bash
make db-reset
</details>

4. Resources

4. 参考资源

ResourceLink
DocsWiki
RunbooksNotion
Slack#service-x
资源链接
文档Wiki
运行手册Notion
Slack#service-x

Questions?

问答环节？

Contact: #service-x-support
Created: 2025-12-22 Built with markdown-presentation@plinde/claude-plugins
undefined
联系方式： #service-x-support
创建时间：2025-12-22 使用 markdown-presentation@plinde/claude-plugins 制作
undefined

Self-Test

自我测试

bash
undefined
bash
undefined

Verify skill exists

验证技能是否存在

ls -la ~/.claude/plugins/marketplaces/plinde-plugins/markdown-presentation/skills/markdown-presentation/SKILL.md
ls -la ~/.claude/plugins/marketplaces/plinde-plugins/markdown-presentation/skills/markdown-presentation/SKILL.md

Or if installed locally

若为本地安装

ls -la ~/.claude/skills/markdown-presentation/SKILL.md
undefined
ls -la ~/.claude/skills/markdown-presentation/SKILL.md
undefined

Related Tools

相关工具

  • Marp - Convert markdown to presentation slides
  • Pandoc - Universal document converter (md → docx, pdf, html)
  • Marp - 将Markdown转换为演示幻灯片
  • Pandoc - 通用文档转换器（md → docx, pdf, html）