痛点：做幻灯片这件小事，怎么越搞越重

不知道你有没有这种经历：想给团队做个 10 页的技术分享，结果一半时间花在调 PPT 的字体、对齐、母版上。改一版要重发一遍文件，同事在微信里丢回来「第 3 页有问题」，你还得翻回去找是第几个矩形框。

Markdown 写文档多爽啊——纯文本、能进 Git、diff 一眼看出改了啥。但分享的时候总得转成幻灯片，于是又掉回 PPT 的坑里。

能不能反过来：就用 Markdown 写，然后一个 HTML 文件直接当幻灯片播？不装软件、不联网、双击就全屏讲。这篇就给你一个

的实现，连同完整代码一起交给你。

方案架构：把 Markdown 切成「页」，再套一层放映壳

关键点在于「零依赖」。很多教程让你 

，一旦断网或 CDN 挂了就白屏。我们要的是

，所以解析器我直接内置一个极简版（够覆盖标题、列表、代码块、加粗、引用），需要更全的地儿你再换 

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>Markdown 幻灯片</title>
<style>
  :root { --bg:#0f1115; --fg:#e6e6e6; --accent:#4f9cff; }
  * { box-sizing:border-box; }
  body { margin:0; font-family:-apple-system,"Segoe UI",sans-serif;
         background:var(--bg); color:var(--fg); overflow:hidden; }
  .slide { display:none; position:absolute; inset:0; padding:6vh 8vw;
           flex-direction:column; justify-content:center; }
  .slide.active { display:flex; }
  .slide h1 { color:var(--accent); font-size:6vh; margin:.2em 0; }
  .slide h2 { color:var(--accent); }
  .slide pre { background:#1a1d24; padding:1em; border-radius:8px;
               overflow:auto; font-size:2.4vh; }
  .slide code { background:#1a1d24; padding:.1em .3em; border-radius:4px; }
  .slide ul li { font-size:3.2vh; line-height:1.6; }
  .bar { position:fixed; bottom:2vh; right:3vw; opacity:.5; font-size:2vh; }
  .dots { position:fixed; bottom:2vh; left:3vw; display:flex; gap:.6vw; }
  .dot { width:1.2vh; height:1.2vh; border-radius:50%; background:#555; }
  .dot.on { background:var(--accent); }
</style>
</head>
<body>
<textarea id="src" style="display:none">
# 第一页标题
这是正文，**加粗** 和 `行内代码` 都支持。

## 第二页
- 用 `---` 分页
- 方向键翻页
- F 全屏




> 引用也能显示

---
# 第三页
按 F 进入全屏，开始讲。
</textarea>
<script>
const md = (s) => s
  .replace(/```[\s\S]*?```/g, m => `<pre>${m.replace(/```\w*\n?/,'').replace(/```/,'')}</pre>`)
  .replace(/^### (.*)$/gm, '<h3>$1</h3>')
  .replace(/^## (.*)$/gm, '<h2>$1</h2>')
  .replace(/^# (.*)$/gm, '<h1>$1</h1>')
  .replace(/^\> (.*)$/gm, '<blockquote>$1</blockquote>')
  .replace(/\*\*(.*?)\*\*/g, '<b>$1</b>')
  .replace(/`([^`]+)`/g, '<code>$1</code>')
  .replace(/^- (.*)$/gm, '<li>$1</li>')
  .replace(/(<li>.*<\/li>)/s, '<ul>$1</ul>');

const raw = document.getElementById('src').value.trim();
const pages = raw.split(/^---$/m);
const body = document.body;
pages.forEach((p, i) => {
  const d = document.createElement('div');
  d.className = 'slide' + (i === 0 ? ' active' : '');
  d.innerHTML = md(p);
  body.appendChild(d);
});
const slides = [...document.querySelectorAll('.slide')];
let cur = 0;
function render() {
  slides.forEach((s, i) => s.classList.toggle('active', i === cur));
  document.querySelector('.bar').textContent = (cur+1) + ' / ' + slides.length;
  document.querySelectorAll('.dot').forEach((x, i) => x.classList.toggle('on', i === cur));
}
slides.forEach((_, i) => {
  const x = document.createElement('div'); x.className = 'dot'; document.querySelector('.dots')?.appendChild(x);
});
const dots = document.createElement('div'); dots.className = 'dots'; body.appendChild(dots);
slides.forEach(() => { const x = document.createElement('div'); x.className = 'dot'; dots.appendChild(x); });
const bar = document.createElement('div'); bar.className = 'bar'; body.appendChild(bar);
addEventListener('keydown', e => {
  if (e.key === 'ArrowRight' || e.key === ' ') cur = Math.min(cur+1, slides.length-1);
  if (e.key === 'ArrowLeft') cur = Math.max(cur-1, 0);
  if (e.key === 'f' || e.key === 'F') document.documentElement.requestFullscreen();
  render();
});
render();
</script>
</body>
</html>


我把团队周会的分享换成这个文件：Markdown 源 80 行，拆成 9 页，全程没开 PPT。讲完顺手 

，下次改内容 diff 清清楚楚。离线笔记本上双击照常跑，会议室断网也不慌。

 标签），就支持表格、任务清单、emoji 了，依然是单文件。

幻灯片不该是「排版工程」，而该是「内容 + 一个放映壳」——一个 HTML 文件、零依赖、进 Git，才是技术人该有的分享方式。

纯 HTML 单文件实现 Markdown 幻灯片工具：一个文件随身讲

痛点：做幻灯片这件小事，怎么越搞越重 不知道你有没有这种经历：想给团队做个 10 页的技术分享，结果一半时间花在调 PP

人工智能

用Markdown写幻灯片，一个HTML文件搞定！无需安装软件，离线可用，支持全屏播放和键盘翻页。内置极简Markdown解析器，零依赖，代码块、列表、引用等常用语法全支持。复制即用，技术分享从此告别PPT排版烦恼，内容管理更高效。

WorkBuddy 

WorkBuddy企业版限时双倍 Credits 活动

workbuddy

CDN免费试用


文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

EdgeOne AI 安全实战专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

纯 HTML 单文件实现 Markdown 幻灯片工具：一个文件随身讲

纯 HTML 单文件实现 Markdown 幻灯片工具：一个文件随身讲

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐