marp-slides

MARP 幻灯片 v2

前置条件

• VS Code 扩展「Marp for VS Code」
• 设置：markdown.marp.enableHtml: true + markdown.marp.allowLocalFiles: true
• 导出：npx @marp-team/marp-cli slides.md --pdf --allow-local-files

示例幻灯片（重要——生成前请阅读）

examples/ 文件夹中包含 22 个精选参考幻灯片。**生成任何幻灯片前，请先阅读 2–3 个与所需风格相符的示例。**这些示例定义了质量标准——请匹配它们的构图、间距和视觉密度。按类别划分的重点示例：

类别	推荐阅读的示例
数据 / 仪表板	marp_facebook-ads.md、marp_fitness.md、marp_comparison.md
生活方式 / 编辑风格	marp_coffee.md、marp_wine-tasting.md、marp_cocktail.md
指南 / 操作教程	marp_garden.md、marp_houseplant.md、marp_home-gym.md
趣味 / 创意	marp_kids-party.md、marp_board-game.md、marp_film-director.md
旅行 / 地点	marp_travel.md、marp_walking-tour.md、marp_road-trip.md
展示 / 主视觉	marp_hero.md、marp_apartment.md、marp_wardrobe.md
参考 / 示例合集	marp_sample.md（组件展示）

核心规则

• 幻灯片之间用 --- 分隔
• YAML frontmatter 控制主题、分页和样式
• enableHtml 可启用 SVG、卡片、图表、动画和交互元素
• 默认比例为 16:9（1280x720）

深色入门模板

深色模板的标题使用 Outfit 800，正文使用 Raleway 100-200。CSS 变量：

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;600;700;800&family=Raleway:wght@100;200;300&display=swap');

:root {
  --accent: #ff6b1a; --accent-hover: #ff8c4a;
  --dark: #000; --card: #080808; --border: #111;
  --body: #999; --label: #666; --muted: #555; --light: #fff;
  --green: #22c55e; --red: #ef4444; --yellow: #f5a623;
}
section { background: var(--dark); color: var(--light); font-family: 'Raleway', sans-serif; font-weight: 200; padding: 56px 72px; }
h1 { font-family: 'Outfit'; font-weight: 800; font-size: 3em; color: var(--light); }
h2 { font-family: 'Raleway'; font-weight: 100; font-size: 1.3em; color: #888; }
h3 { font-family: 'Outfit'; font-weight: 600; font-size: 0.6em; color: var(--muted); text-transform: uppercase; letter-spacing: 0.2em; }
strong { color: var(--accent); font-weight: 300; }
section.lead { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; }
header { text-align: right; } header img { margin: 0; }
.row:hover { background: #0c0c0c; } .row { transition: background 0.2s; border-radius: 6px; }
details { background: var(--card); border: 1px solid var(--border); border-radius: 10px; padding: 14px 18px; margin-top: 8px; }
details summary { color: var(--accent); font-family: 'Outfit'; font-weight: 600; font-size: 0.8em; cursor: pointer; }
details p { color: var(--body); font-size: 0.78em; margin-top: 8px; }
.tag { font-family: 'Outfit'; font-weight: 600; font-size: 0.55em; letter-spacing: 0.12em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; }
abbr { text-decoration: none; border-bottom: 1px dotted #333; cursor: help; }

Frontmatter 包含：header: '![w:100](./logo.png)'

浅色主题

替换变量：--accent: #2563eb; --dark: #fafafa; --card: #fff; --border: #eee; --body: #666; --label: #bbb; --light: #1a1a1a; 使用 Space Grotesk + IBM Plex Mono 或 Plus Jakarta Sans。

标题层级

• h1 = 标题幻灯片（白色，超大字号）
• h2 = 副标题（灰色，细体）
• h3 = 章节标签（柔和色调、大写、小号）

字体搭配（已测试）

标题	正文	用途
Outfit 800	Raleway 100	仪表板、数据（默认）
DM Serif Display	DM Sans 300	食谱、编辑风格
Space Grotesk 700	IBM Plex Mono 300	旅行、浅色主题
Sora 700	Sora 200	产品对比
Urbanist 800	Urbanist 100	音乐、Spotify 风格
Plus Jakarta Sans 800	Plus Jakarta Sans 200	回顾、团队幻灯片

图片

重要：仅使用相对路径。./image.png 可用。绝对路径会导致预览失败。

• Logo 页眉：header: '![w:100](./logo.png)' — 每张幻灯片单独隐藏：``
• 照片背景：![bg brightness:0.15](https://unsplash.com/photo-ID?w=1400)
• 分栏：![bg right:35% brightness:0.2 blur:3px](url) 或 ![bg left:30%](url)
• CDN Logo：<img src="https://cdn.jsdelivr.net/gh/homarr-labs/dashboard-icons/png/name.png" style="width:200px;" />
• 居中行内图片：将 img 包在 <div style="display:flex; justify-content:center;"> 中，并添加圆角和边框

仪表板组件

指标卡片（渐变顶部边框）

卡片使用 position:relative; overflow:hidden;，顶部放置一个绝对定位的 div，设置 background:linear-gradient(90deg, var(--accent), transparent); height:2px;。包含图标、标签、大号数字和趋势箭头。

状态圆点

行内 SVG 圆形：绿色（#22c55e）= 活跃，黄色（#f5a623）= 学习中，红色（#ef4444）= 已暂停。 <svg width="8" height="8" viewBox="0 0 8 8"><circle cx="4" cy="4" r="4" fill="#22c55e"/></svg>

结论标签

<span class="tag" style="background:#22c55e12; color:var(--green); border:1px solid #22c55e22;">Scale</span> 切换为红色（终止）或黄色（复核）。

悬停行

将内容包在 <div class="row"> 中即可实现悬停高亮效果。

SVG 图表

折线图 / 面积图

用 SVG polyline 绘制折线，并用带线性渐变填充的 polygon 填充折线下方区域。添加网格线、虚线目标线和圆形数据点。使用 viewBox="0 0 900 240"，并设置 preserveAspectRatio="none"。

饼图 / 环形图

每个扇区 = 独立圆形，使用 stroke-dasharray 和 stroke-dashoffset。计算公式：周长 = 2pir。当 r=110 时：约为 691。扇区 = (pct/100)*691。偏移量依次累加且为负值。stroke-width 控制环的厚度。始终使用 transform="rotate(-90 cx cy)"。

仪表盘 / 半圆仪表

使用 SVG 路径弧线绘制背景 + 彩色数值弧线。指针线从中心延伸 + 圆形枢轴。适用于 0-100 的分数。stroke-linecap="round"。

环形图

单个圆形 stroke-dasharray。circ = 2pir。偏移量 = circ - (circ * pct/100)。当 r=74 时：circ=465。89%：偏移量=51。

迷你折线图（内嵌）

<svg width="50" height="16"><polyline points="0,14 8,12 16,10 24,8 50,2" fill="none" stroke="#22c55e" stroke-width="1.2"/></svg>

堆叠条形图

使用带彩色百分比宽度分段的 Flex div，并设置 border-radius 和 overflow:hidden。

垂直条形图

Flex 容器设置 align-items:flex-end。渐变条形：background:linear-gradient(180deg, var(--accent), #cc5515); border-radius:3px 3px 0 0;

雷达图 / 蜘蛛网图

使用 SVG 多边形绘制六边形网格 + 数据形状，并设置 fill-opacity:0.1 和描边。

交互元素

• 可折叠内容：<details><summary>Title</summary><p>Content</p></details>
• 工具提示：<abbr title="Full text">TERM</abbr>
• 滑块：<input type="range" style="accent-color:var(--accent);" />
• 复选框：<input type="checkbox" checked style="accent-color:var(--accent);" />
• 进度条：<progress value="76" max="100" style="accent-color:var(--accent);"></progress>

布局组件

• 前后对比拆分 — 两个 Flex 面板，顶部边框分别为红色和绿色
• 终端模拟框 — 交通灯圆点 + 等宽字体正文
• 浏览器模拟框 — 圆点 + URL 栏 div
• 聊天气泡 — 用户（左侧）+ Agent（右侧，橙色调）
• 流程图 — 方框 + SVG 箭头连接线
• 时间线 — 左侧垂直边框 + 圆点
• 卡片行 — display:flex; gap:14px; 子元素设置 flex:1

SVG 图标

全部包裹在 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="var(--accent)" stroke-width="1.5"> 中。尺寸：内嵌=16，卡片=44，功能项=32。

美元：path d="M12 2v20M17 5H9.5a3.5 3.5 0 1 0 0 7h5a3.5 3.5 0 1 1 0 7H6" 心跳：polyline points="22 12 18 12 15 21 9 3 6 12 2 12" 勾选（#22c55e）：path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" + polyline points="22 4 12 14.01 9 11.01" 向上箭头（#22c55e）：polyline points="18 15 12 9 6 15" 向下箭头（#ef4444）：polyline points="18 9 12 15 6 9" 叉号圆圈（#ef4444）：circle cx=12 cy=12 r=10 + 两条交叉线 时钟：circle cx=12 cy=12 r=10 + polyline points="12 6 12 12 16 14" 眼睛：path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" + circle cx=12 cy=12 r=3 闪电：path d="M13 2L3 14h9l-1 8 10-12h-9l1-8z" 警告（#f5a623）：三角形路径 搜索：circle cx=11 cy=11 r=8 + 连线延伸至角落 条形：三条垂直路径 用户：用户轮廓路径 + 圆圈 地球：圆圈 + 水平线 + 垂直椭圆路径 锁：矩形 + 拱形路径 书本：表示书本形状的两条路径

动画（仅 HTML 导出 + 预览适用）

float：translateY(0) 至 -8px，然后返回 glow：使用强调色的 box-shadow 脉冲效果 blink：光标的边框颜色切换

通过延迟实现交错效果：animation: float 4s ease-in-out 0.5s infinite;

导出

npx @marp-team/marp-cli slides.md --pdf --allow-local-files npx @marp-team/marp-cli slides.md --pptx --allow-local-files npx @marp-team/marp-cli slides.md --html --allow-local-files --pptx-editable 需要 LibreOffice。动画 + details 仅在 HTML 中支持。

设计规则

1. 每张幻灯片只表达一个观点。溢出内容会被静默裁切。
2. h1 使用白色。强调色仅用于突出数据。
3. 正文使用 #999，标签使用 #666。颜色不能比 #555 更深。
4. 列表幻灯片最多显示 6 行。
5. 优先使用图表，而非数字。不同幻灯片应混合使用不同的视觉类型。
6. 图片仅使用相对路径。
7. 始终预览——源文件中不得有溢出警告。
8. 每张幻灯片的覆盖项：_backgroundColor、_header、_paginate、_footer

自定义尺寸：section { width: 540px; height: 720px; }（CSS，不是 frontmatter 中的 size）。 纵向排版：垂直堆叠，缩小 15-20%。