jinnyjiinlee/presenter-mode

# 演示者模式      - 🖥️ **演示者窗口（仅自己可见）** — 当前/下一张幻灯片 · 演讲者备注 · 计时器 · 缩略图条 - 📽️ **会场屏幕（观众观看）** — 仅展示纯净的幻灯片，全屏显示 - 🔌 会场断网也能正常工作 — 这是一款在实际企业和机构培训（包括7小时全天培训）中使用的工具 ## 为什么开发此工具 我是一名从事 AI 培训的讲师。我的培训课件是使用 claude code agent 制作的 **HTML 幻灯片** — 这比 PPT 快得多，设计也更精美。 但是唯独缺少了一样东西：**演示者视图**。 如果是 PowerPoint，这是理所当然会有的画面 — 一边看备注，一边确认下一张幻灯片，一边把控时间。由于 HTML 幻灯片没有这个功能，我只好把备注打印在纸上，拿着它完成了7小时的讲座。所以我亲手开发了它，现在分享给所有使用 HTML 幻灯片的人。 | 目录 | [① 3分钟体验](#-1-일단-3분-체험) → [② 嵌入我的幻灯片](#-2-내-슬라이드에-붙이기--방법은-2가지) → [③ 功能](#-3-기능-한눈에) → [④ 快捷键](#-4-단축키) → [⑤ 会场设置](#-5-강의장-세팅-체크리스트) → [⑥ 工作原理](#-6-어떻게-동작하나요) → [FAQ](#faq) · [更新日志](CHANGELOG.md) | |---|---| ## ▶ 1. 首先，3分钟体验 1. 点击绿色的 `Code` 按钮 → `Download ZIP` → 解压 2. **双击** `index.html`（将使用 Chrome 打开） 3. 按下键盘上的 **`P`** — 演示者窗口出现！ ## ▶ 2. 嵌入我的幻灯片 — 两种方法 | | **方法 1 · 交给 AI 处理** ⭐ | **方法 2 · 手动嵌入** | |---|---|---| | 适用人群 | 非开发者，忙碌的人 | 熟悉 HTML 的人 | | 耗时 | 约 5 分钟 | 10~20 分钟 | | 所需工具 | claude code 等 AI 编码工具 | 文本编辑器 | ### 方法 1 · 交给 AI 处理 ⭐ 将下面的 prompt 直接粘贴到 claude code 中。**需要替换的只有两处带方括号 `[ ]` 的地方**。 ``` 아래 저장소의 "발표자 모드"를 내 슬라이드 파일에 붙여줘. 저장소: https://github.com/jinnyjiinlee/presenter-mode 내 슬라이드 파일: [내 슬라이드 HTML 파일 경로. 예: ~/Desktop/발표자료.html] 작업 순서: 1. 저장소의 index.html에서 발표자 모드 엔진을 통째로 가져와 (CSS의 "발표자 모드 (Presenter View)" 섹션부터 끝까지 +