Markdown 转 Reveal.js 幻灯片

使用 `---` 分隔页面,把 Markdown 变成可在浏览器中播放的网页演示。工作区显示生成后的 HTML 源码;下载后用浏览器打开,才能查看真正的 Reveal.js 演示。需要 PowerPoint 文件时请选择 Markdown 转 PPTX。

Markdown 输入

86 字符

幻灯片 预览

转换后的文字
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ilovemd 幻灯片</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/theme/white.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/highlight/monokai.css">
<style>
  .reveal h1, .reveal h2, .reveal h3 { text-transform: none; }
  .reveal section img { border: none; box-shadow: none; }
  .reveal pre { font-size: 0.55em; }
  .reveal blockquote {
    border-left: 4px solid #e85d3c;
    background: #fde8e2;
    padding: 0.5em 1em;
    font-style: normal;
  }
  .reveal table { font-size: 0.6em; }
  .reveal code { color: #e85d3c; }
</style>
</head>
<body>
<div class="reveal">
<div class="slides">
<section><h1>项目笔记</h1>
<p>清晰的文档从<strong>明确的结构</strong>开始。</p>
<h2>检查重点</h2>
<ul>
<li>层级清楚的标题</li>
<li>可以正常打开的链接</li>
<li>便于继续编辑的文件</li>
</ul>
<blockquote>
<p>下载前先检查渲染预览。</p>
</blockquote>
</section>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/dist/reveal.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/highlight/highlight.js"></script>
<script src="https://cdn.jsdelivr.net/npm/reveal.js@5/plugin/markdown/markdown.js"></script>
<script>
  Reveal.initialize({
    hash: true,
    slideNumber: 'c/t',
    transition: 'slide',
    plugins: [RevealHighlight, RevealMarkdown]
  });
</script>
</body>
</html>
文件在当前浏览器标签页中处理。

如何用 Markdown 制作网页幻灯片

每页只保留一个清楚的观点。

01

按页写 Markdown

用标题作为页标题,用列表和简短段落组织内容,用 `---` 分隔页面。

02

检查生成的 HTML

在工作区核对源码是否包含预期标题、列表、代码和链接。

03

下载并试播

用目标浏览器打开 HTML,在投影比例和离线环境中测试资源是否可用。

Reveal.js 演示

用文本大纲快速生成可播放页面

输出是浏览器幻灯片,与 PowerPoint 工作流区分开。

分隔线分页用简单标记决定新幻灯片。
代码友好适合技术演示中的代码块和项目符号。
浏览器播放无需 PowerPoint 即可展示 HTML 演示文稿。
常见用途

适合快速、可版本控制的演示

技术分享

把代码示例和讲解保存在同一份 Markdown 中。

会议简报

从会议提纲快速制作一套短演示。

在线课程

用网页播放讲义,并把源文档放入版本库。

常见问题

Markdown 转幻灯片常见问题

能在 PowerPoint 里编辑吗?

本页生成网页演示,不是 PowerPoint 文件。需要 .pptx 请使用 Markdown 转 PowerPoint。

如何开始新的一页?

通常在独立一行使用 `---`。请先检查生成的 HTML,再下载并在浏览器中试播,确认分页符合预期。

可以离线播放吗?

取决于导出文件是否包含所需资源。下载后应断网测试一次,确认脚本、字体和图片没有依赖外链。