Markdown 幻灯片:生成独立 HTML 演示文稿 - Openclaw Skills

作者:互联网

2026-04-17

AI教程

什么是 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 幻灯片 工作原理
  1. 该工具分析提供的 Markdown,并根据水平分割线(---)识别幻灯片分页。
  2. 每个片段都会被解析并转换为语义化的 HTML 元素,包括标题、列表和代码块。
  3. 生成的内容被注入到一个强大的 HTML5 模板中,该模板包含用于布局和转场效果的响应式 CSS。
  4. 通过嵌入的 JavaScript 添加导航逻辑,以处理键盘输入(方向键、空格、Home/End)以及触摸/点击事件。
  5. 最终输出保存为一个独立的 .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

  1. Parse input — Split markdown content on --- (horizontal rule) to create individual slides.

  2. Convert markdown to HTML for each slide:

    • # heading

      (title slides)

    • ## heading

      (section headers)

    • - item
      • (bullet lists)
      • **bold**, *italic*
      • `code`, code blocks →
      • ![alt](url)
      • Paragraphs →

    • Wrap in HTML template with embedded CSS and JavaScript:






PRESENTATION_TITLE




  1. Save as slides.html (or user-specified path).

  2. 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 # heading as 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).

相关推荐

脚本在线

智能赋能梦想,脚本构筑现实。我们致力于链接AI智能指令 与传统自动化,为您提供一站式、高效率的脚 本资产与生成 服务。

核心板块

AI脚本库 自动化仓库 脚本实验室

关于我们

最新游戏 商务合作 隐私政策

社区支持

API文档 攻略资讯 违规举报

© 2026 jiaoben.net | 脚本在线 | 联系:jiaobennet2026@163.com

备案:湘ICP备18025217号-11