Markdown 幻灯片:生成独立 HTML 演示文稿 - Openclaw Skills
作者:互联网
2026-04-17
什么是 Markdown 幻灯片?
Markdown 幻灯片是 Openclaw Skills 库中的一个专门工具,旨在简化专业演示文稿的创建。它允许开发人员和作者在保持其首选文本工作流的同时,生成高质量、浏览器就绪的幻灯片。通过利用简单的 Markdown 语法,此功能可自动将文本转换为包含所有必要 CSS 和 JavaScript 的单个 HTML 文件,非常适合离线使用或快速演示。
该工具专为速度和便携性而设计。与笨重的演示软件不同,它生成的轻量级文件零外部依赖。用户可以轻松自定义主题、颜色和字体,以匹配其品牌或项目风格。使用 Openclaw Skills 满足您的演示需求,可确保您的幻灯片版本控制友好,并且可以作为单一资产轻松共享。
下载入口:https://github.com/openclaw/skills/tree/main/skills/sa9saq/markdown-slides
安装与下载
1. ClawHub CLI
从源直接安装技能的最快方式。
npx clawhub@latest install markdown-slides
2. 手动安装
将技能文件夹复制到以下位置之一
全局模式~/.openclaw/skills/
工作区
/skills/
优先级:工作区 > 本地 > 内置
3. 提示词安装
将此提示词复制到 OpenClaw 即可自动安装。
请帮我使用 Clawhub 安装 markdown-slides。如果尚未安装 Clawhub,请先安装(npm i -g clawhub)。
Markdown 幻灯片 应用场景
- 直接从项目 README 或文档创建技术演示。
- 为软件发布或团队站会生成快速演示稿。
- 为互联网访问受限的环境构建离线优先的演示文稿。
- 生成与源代码位于同一仓库中的可版本控制幻灯片。
- 该工具分析提供的 Markdown,并根据水平分割线(
---)识别幻灯片分页。 - 每个片段都会被解析并转换为语义化的 HTML 元素,包括标题、列表和代码块。
- 生成的内容被注入到一个强大的 HTML5 模板中,该模板包含用于布局和转场效果的响应式 CSS。
- 通过嵌入的 JavaScript 添加导航逻辑,以处理键盘输入(方向键、空格、Home/End)以及触摸/点击事件。
- 最终输出保存为一个独立的 .html 文件,可直接在浏览器中查看。
Markdown 幻灯片 配置指南
要在 Openclaw Skills 生态系统中使用此功能,请准备好您的 Markdown 文件并指示代理生成幻灯片。
# 示例:转换您的内容
# 代理将处理您的 Markdown 并输出一个文件:
# slides.html
只需在任何现代 Web 浏览器中打开生成的文件,然后按 F11 即可获得全屏演示体验。
Markdown 幻灯片 数据架构与分类体系
该功能将内容组织成特定的结构化分类,以确保在不同浏览器中呈现的一致性。
| 组件 | Markdown 触发器 | HTML/CSS 实现 |
|---|---|---|
| 幻灯片容器 | --- |
带有 flexbox 居中的 |
| 标题 | # |
带有线性渐变文本样式的 |
| 章节标题 | ## |
带有强调色缩放的 |
| 代码块 | ``` |
带有 overflow-x 处理的 |
| 导航 | 不适用 | 用于方向键和点击的 JavaScript 事件器 |
| 进度 UI | 不适用 | 固定底部栏,具有动态宽度百分比 |
description: Convert markdown into self-contained HTML slide presentations with keyboard navigation.
Markdown Slides
Convert markdown into standalone HTML slide decks — zero dependencies, works offline.
Use when creating presentations from markdown, quick slide decks, or demo presentations.
Requirements
- No external tools, build steps, or API keys
- Output: single HTML file, works in any browser
Instructions
-
Parse input — Split markdown content on
---(horizontal rule) to create individual slides. -
Convert markdown to HTML for each slide:
# heading→(title slides)## heading→(section headers)- item→(bullet lists)**bold**→,*italic*→`code`→, code blocks →→- Paragraphs →
-
Wrap in HTML template with embedded CSS and JavaScript:
PRESENTATION_TITLE
-
Save as
slides.html(or user-specified path). -
Tell the user: Open in browser, use ←/→ arrows or click to navigate, F11 for fullscreen.
Customization Options
| Option | Default | Alternatives |
|---|---|---|
| Theme | Dark (#1a1a2e) | Light (#fff), Solarized |
| Font | System UI | Monospace, Serif |
| Accent | #667eea | Any hex color |
| Ratio | 16:9 (viewport) | Can add letterboxing |
Edge Cases
- No
---separators: Treat each# headingas a slide break. - Very long slides: Content may overflow. Suggest splitting into multiple slides.
- Images: Must be URLs or base64-encoded. Local file paths won't work in standalone HTML.
- Code-heavy slides: Reduce font size for
blocks on those slides. - Speaker notes: Can add
comments (hidden from view).
相关推荐
专题
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
+ 收藏
最新数据
相关文章
Minecraft 3D 建造计划生成器:AI 场景架构师 - Openclaw Skills
Scholar Search:自动化文献搜索与研究简报 - Openclaw Skills
issue-to-pr: 自动化 GitHub Issue 修复与 PR 生成 - Openclaw Skills
接班交班总结器:临床 EHR 自动化 - Openclaw Skills
Teacher AI 备课专家:K-12 自动化教案设计 - Openclaw Skills
专利权利要求映射器:生物技术与制药 IP 分析 - Openclaw Skills
生成 Tesla 车身改色膜:用于 3D 显示的 AI 图像生成 - Openclaw Skills
Taiwan MD:面向台湾的 AI 原生开放知识库 - Openclaw Skills
自学习与迭代演进:AI Agent 成长框架 - Openclaw Skills
HIPC Config Manager: 安全的 API 凭据处理器 - Openclaw Skills
AI精选
