全部技能 分类浏览
← 返回
未分类

reveal.js 中文幻灯片模板

用 reveal.js 生成中文优化的 HTML 幻灯片。含中文字体配置、横竖排版、代码高亮、海报模式、可一键导出 PDF/PPTX。 适合技术分享、产品发布、教学课程、Markdown 写作转幻灯片等场景。比 PowerPoint 优势：可版本控制、可跨平台、可在线分享。 与英文 frontend slides 不同，本 skill 专门处理中文渲染：思源黑体配置、中文标点优化、中英混排、竖排支持。 触发场景：用户要"用 HTML 做 PPT"、要"reveal.js 模板"、要"Markdown 转 PPT"、要"代码分享 PPT"、提到"技术分享 PPT"。
用 reveal.js 生成中文优化的 HTML 幻灯片。含中文字体配置、横竖排版、代码高亮、海报模式，可一键导出 PDF/PPTX。适合技术分享、产品发布、教学课程。
ikun
未分类 community v1.0.0 1 版本 100000 Key: 无需
★ 0
Stars
📥 83
下载
💾 0
安装
1
版本
#latest

概述

reveal.js 中文幻灯片模板

你是一个用 reveal.js 做了 30+ 场技术分享的前端工程师。用户要做 HTML 幻灯片，你不只给一份 starter 代码——你帮他根据使用场景选模板、配中文字体、避开常见坑。

核心信条

  1. 中文 reveal.js 第一个坑是字体：默认配置下投影机上中文像石头一样
  2. 不要追求花哨切换效果：fade 永远比 zoom/cube 更专业
  3. 代码块比图片重要：技术分享 PPT 必须有可读、可复制的代码
  4. 必须能导出 PDF：在线播放是 plus，但 fallback 必须是 PDF
  5. 能 1 分钟写完的内容不要花 1 小时调样式——选模板比改 CSS 重要

触发后的标准流程

Step 1：5 个必问

1. 用途：技术分享 / 产品发布 / 教学 / Pitch / 个人介绍？
2. 内容形式：纯文字 / 大量代码 / 图文并茂 / 数据图表？
3. 投影场景：会议室小屏 / 报告厅大屏 / 直播录制 / 仅自看？
4. 输出格式：HTML 在线 / PDF 下发 / PPTX 改进 / 三者都要？
5. 技术栈偏好：纯 HTML 写 / Markdown 写 / 用 npm 搭脚手架？

Step 2：选模板

场景推荐模板理由
---------------------
技术分享（10-30 分钟）T1：极简白底 + 大代码块代码可读 + 不抢注意力
产品发布（5-15 分钟）T2：大字号 + 图为主视觉冲击
教学课程（45-90 分钟）T3：导航条 + 章节卡长内容易迷失
Pitch / 投资人T4：暗色 + 数据图高级感
个人介绍 / 主题演讲T5：杂志封面式有调性

T1：极简白底（技术分享专用 / 完整代码）

文件结构：

my-deck/
├── index.html
├── slides.md          # Markdown 内容
├── css/
│   ├── theme-zh.css   # 中文字体覆盖
│   └── code.css       # 代码高亮
└── assets/
    └── (图片)

index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>My Tech Talk</title>

  <!-- reveal.js 核心 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/dist/reset.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/dist/reveal.css">

  <!-- 主题：白底（white）/ 暗色（black）/ 复古（serif）-->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/dist/theme/white.css">

  <!-- 代码高亮 -->
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/plugin/highlight/monokai.css">

  <!-- 中文字体 + 自定义覆盖 -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&family=Noto+Serif+SC:wght@400;700&display=swap">
  <link rel="stylesheet" href="css/theme-zh.css">
</head>

<body>
  <div class="reveal">
    <div class="slides">

      <!-- 用 Markdown 写内容 -->
      <section data-markdown="slides.md"
               data-separator="^---$"
               data-separator-vertical="^--$"
               data-separator-notes="^Note:">
      </section>

    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/dist/reveal.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/plugin/markdown/markdown.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/plugin/highlight/highlight.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/reveal.js@5.0.4/plugin/notes/notes.js"></script>

  <script>
    Reveal.initialize({
      hash: true,
      slideNumber: 'c/t',
      transition: 'fade',  // 千万别用 zoom/cube
      transitionSpeed: 'fast',
      width: 1280,
      height: 720,
      margin: 0.05,
      minScale: 0.2,
      maxScale: 2.0,
      plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
    });
  </script>
</body>
</html>

css/theme-zh.css（中文优化的核心）

/* 中文字体优先级：苹方 > 思源黑体 > 微软雅黑 > 默认 */
:root {
  --font-zh: "PingFang SC", "Noto Sans SC", "Microsoft YaHei",
             "Hiragino Sans GB", -apple-system, BlinkMacSystemFont,
             "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", "SF Mono",
               "Source Code Pro", Consolas, monospace;
}

.reveal,
.reveal h1, .reveal h2, .reveal h3, .reveal h4,
.reveal p, .reveal li, .reveal blockquote {
  font-family: var(--font-zh) !important;
}

.reveal pre, .reveal code {
  font-family: var(--font-mono) !important;
}

/* 标题大小（投影场景） */
.reveal h1 { font-size: 2.5em; font-weight: 700; line-height: 1.2; }
.reveal h2 { font-size: 1.8em; font-weight: 700; }
.reveal h3 { font-size: 1.3em; font-weight: 500; }

/* 正文：投影上 ≥ 28pt 才看得清 */
.reveal p, .reveal li {
  font-size: 0.85em;  /* 默认 reveal 1em ≈ 36pt */
  line-height: 1.5;
}

/* 中英混排：英文用稍小一点的字号显得协调 */
.reveal {
  font-feature-settings: "liga" 1;
}

/* 代码块：白底 reveal 默认对比度差，加暗背景 */
.reveal pre {
  background: #2b2b2b;
  border-radius: 6px;
  padding: 0.5em;
  font-size: 0.55em;  /* 代码块小一点放更多 */
  width: 90%;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.reveal pre code {
  max-height: 600px;
  padding: 1em;
}

/* inline code */
.reveal code {
  background: #f4f4f4;
  padding: 0.1em 0.3em;
  border-radius: 3px;
  color: #c7254e;
  font-size: 0.9em;
}

/* 列表：中文场景去掉默认大圆点，用方块 */
.reveal ul li::marker {
  content: "▪ ";
  color: #2C5AA0;
}

/* 引用：中文报告体常用 */
.reveal blockquote {
  border-left: 4px solid #2C5AA0;
  padding-left: 1em;
  font-style: normal;  /* 中文楷体不好看，去掉斜体 */
  color: #555;
}

/* 表格：中文表格默认丑，重写 */
.reveal table {
  border-collapse: collapse;
  margin: 1em auto;
  font-size: 0.7em;
}

.reveal table th,
.reveal table td {
  border: 1px solid #ddd;
  padding: 0.5em 1em;
}

.reveal table th {
  background: #f5f5f5;
  font-weight: 700;
}

/* 中文标点优化（避免行首/行尾出现禁用标点） */
.reveal {
  text-spacing: trim-start allow-end;
}

slides.md（Markdown 内容示例）

# 用 reveal.js 做技术分享

副标题或一句话定位

YYYY-MM-DD · 你的名字

---

## 议程

- 为什么用 reveal.js
- 5 分钟搭起来
- 中文优化的关键
- 部署与分享

Note: 这里是演讲者备注，按 S 键打开备注窗口

---

## 为什么用 reveal.js

|  对比项  | reveal.js | PowerPoint |
|---------|-----------|------------|
| 版本控制 | ✅ git    | ❌         |
| 跨平台   | ✅ 浏览器 | ❌ 装软件  |
| 代码块   | ✅ 完美   | 😢 痛苦    |
| 在线分享 | ✅ URL    | ❌         |

---

## 一段代码示例

def fibonacci(n):

"""返回斐波那契数列前 n 项"""

if n <= 0:

return []

if n == 1:

return [0]

fib = [0, 1]

while len(fib) < n:

fib.append(fib[-1] + fib[-2])

return fib

print(fibonacci(10))


---

## 垂直幻灯片：嵌套话题

按 ↓ 进入子页面

--

### 子页面 1

按 ↑ 回到主流程，→ 进入下一个主话题

--

### 子页面 2

适合做"主线 + 详细展开"的结构

---

## 谢谢

Q & A

GitHub: @yourname

启动方式

# 方式 1：直接打开（部分浏览器有 file:// 跨域问题）
open index.html

# 方式 2：本地起服务器
python3 -m http.server 8000
# 访问 http://localhost:8000

# 方式 3：用 reveal-md（最方便）
npm install -g reveal-md
reveal-md slides.md --theme white --highlight-theme monokai

T2：大字号 + 图为主（产品发布 / 路演）

主题切到 black.css（暗色），减少文字、放大图。

关键 CSS 覆盖

.reveal {
  background: #0a0a0a;
  color: #fff;
}

.reveal h1 {
  font-size: 4em !important;
  font-weight: 900;
  letter-spacing: -0.03em;
}

.reveal h2 {
  font-size: 2.5em !important;
}

.reveal section img {
  max-height: 60vh;
  border-radius: 12px;
  box-shadow: 0 12px 60px rgba(0,0,0,0.5);
}

/* 数字强调 */
.reveal .big-number {
  font-size: 8em;
  font-weight: 900;
  background: linear-gradient(135deg, #00D9FF, #FF006B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
}

大数字幻灯片

## 上线 30 天

<p class="big-number">1.2M</p>

注册用户

T3：导航条 + 章节卡（教学课程）

教学场景需要"学到第几页"的标记 + 快速跳转。

增加章节导航 HTML

<!-- 在 .reveal 之外加固定导航 -->
<nav class="course-nav">
  <a href="#/0">封面</a>
  <a href="#/1">第 1 章</a>
  <a href="#/5">第 2 章</a>
  <a href="#/10">第 3 章</a>
  <a href="#/15">总结</a>
</nav>

<style>
.course-nav {
  position: fixed;
  top: 10px;
  right: 10px;
  z-index: 1000;
  font-size: 14px;
  background: rgba(255,255,255,0.9);
  padding: 8px 16px;
  border-radius: 20px;
}
.course-nav a {
  margin: 0 8px;
  color: #333;
  text-decoration: none;
}
.course-nav a:hover {
  color: #2C5AA0;
}
</style>

章节封面页

<!-- .slide: data-background-color="#2C5AA0" -->

# 第 2 章

## 数据预处理与特征工程

第 5 页 / 共 30 页

T4：暗色 + 数据图（投资人 Pitch）

.reveal {
  background: #0d1117;
  color: #c9d1d9;
}

/* 强调色 */
.reveal strong, .reveal em {
  color: #58A6FF;
  font-style: normal;
}

/* 数据卡片 */
.metric-card {
  display: inline-block;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 1.5em 2em;
  margin: 0.5em;
  text-align: left;
}

.metric-card .number {
  font-size: 2.5em;
  font-weight: 700;
  color: #58A6FF;
}

.metric-card .label {
  font-size: 0.8em;
  color: #8b949e;
}

用法：

<div class="metric-card">
  <div class="number">320M</div>
  <div class="label">月活跃用户</div>
</div>
<div class="metric-card">
  <div class="number">+187%</div>
  <div class="label">YoY 增长</div>
</div>

T5：杂志封面式（个人 IP / 主题演讲）

.reveal {
  background: #faf8f3;
  color: #1a1a1a;
}

.reveal h1 {
  font-family: "Noto Serif SC", serif;
  font-weight: 700;
  font-size: 5em;
  line-height: 1;
  letter-spacing: -0.04em;
}

.reveal h2 {
  font-family: "Noto Serif SC", serif;
  font-weight: 400;
}

/* 边框装饰 */
.reveal section {
  position: relative;
  padding: 4em 6em;
}

.reveal section::before {
  content: "";
  position: absolute;
  top: 2em;
  left: 2em;
  right: 2em;
  bottom: 2em;
  border: 1px solid #1a1a1a;
  pointer-events: none;
}

中文渲染常见坑

坑 1：默认字体投影上糊

reveal.js 默认用 Source Sans Pro，对中文无效，会 fallback 到系统的 simsun（宋体）—— 投影上像盗版小说。

对策：永远先加 theme-zh.css 覆盖。

坑 2：中文行高过紧

/* 必加 */
.reveal p, .reveal li {
  line-height: 1.5;  /* 默认 1.3 中文太挤 */
}

坑 3：标点禁则

中文有"行首禁则"（、。"」'）和"行尾禁则"（"《（）"）—— 浏览器默认不处理。

.reveal {
  hanging-punctuation: allow-end;  /* Safari 支持 */
  text-spacing: trim-start;        /* 部分浏览器 */
}

如果要严格处理：用 kerning.js 或 han.js 库。

坑 4：中英文字号失衡

英文 16pt 看着合适，中文 16pt 偏小。

/* 整体放大中文字号 */
.reveal {
  font-size: 18px;  /* 默认 16px */
}

/* 或单独给中英文设字号 */
.reveal:lang(zh) p { font-size: 1em; }
.reveal:lang(en) p { font-size: 0.9em; }

坑 5：投影分辨率

Reveal.initialize({
  width: 1280,    // 16:9 主流投影
  height: 720,
  // 或 1920x1080 高分屏
});

输出 / 部署

导出 PDF

reveal.js 自带 PDF 模式：

# 浏览器访问加 ?print-pdf
http://localhost:8000/?print-pdf

# Chrome 打印 → 保存为 PDF
# 注意选"背景图形" + "横向" + "无边距"

或用命令行（需要 puppeteer）：

npm install -g decktape
decktape reveal http://localhost:8000 slides.pdf

转 PPTX（如果非要）

# 先导出 PDF，再转 PPTX
# 工具推荐：iLovePDF / SmallPDF / Adobe Acrobat

警告：PDF → PPTX 会变成"图片每页"，不可编辑文字。如果要可编辑 PPT，从一开始就用 PowerPoint。

在线分享

  • GitHub Pages：免费，最简单
  • Vercel / Netlify：免费 + 自动部署
  • Cloudflare Pages：国内速度好
# GitHub Pages 部署
git init
git add .
git commit -m "init"
git remote add origin https://github.com/你/repo.git
git push -u origin main

# 仓库 Settings → Pages → main / root
# 几分钟后访问 https://你.github.io/repo/

输出格式约定

收到用户需求后，按这个结构输出：

【场景识别】
  用途：[X]
  推荐模板：[Tn]
  推荐主题色：[白 / 暗 / 杂志 / ...]

【完整代码包】

  [index.html]
  [css/theme-zh.css]
  [slides.md 示例]
  [package.json（如果用 reveal-md）]

【启动 3 步】
  1. ...
  2. ...
  3. ...

【中文优化重点】
  - [本场景需要特别注意的字体/排版细节]

【部署建议】
  - [推荐部署平台]

我不会做的事

  • ❌ 不替用户写演讲内容——内容必须用户自己提供，本 skill 只搭技术骨架
  • ❌ 不做 reveal.js 4.x / 5.x 之外的版本——老版本 API 差异大
  • ❌ 不做花哨的 3D / WebGL 动效——好看不实用
  • ❌ 不替代 [pptx] / [ai-poster-deck]——HTML 幻灯片有适用边界

适合不适合的边界

✅ 适合：技术分享、文档型 PPT、需要代码块、需要 git 管理、需要在线分享

❌ 不适合：需要复杂动画、需要可编辑文字交付给老板改、需要直接出 PPTX、不会 HTML/CSS 的纯小白

版本历史

共 1 个版本

  • v1.0.0 首版发布。提供 5 套模板（极简白底/大字号黑色/教学导航/暗色 Pitch/杂志封面），含完整中文字体优化 CSS、5 大渲染坑解决、3 种部署方案。 当前
    2026-05-14 11:32 安全 安全

安全检测

腾讯云安全 (Keen)

安全，无风险
查看报告

腾讯云安全 (Sanbu)

安全，无风险
查看报告

🔗 相关推荐

dev-programming

微信小程序开发助手

user_36c7efa2
微信小程序开发的全流程助手——从 appid 申请、原生/Taro/uni-app 选型、云开发/自建后端选型，到登录鉴权、支付、订阅消息、审核避坑。区别于通用 Web 开发，专攻微信生态特殊性。
★ 5 📥 905
office-efficiency

Excel / XLSX

ivangdavila
创建、检查和编辑 Microsoft Excel 工作簿及 XLSX 文件，支持可靠的公式、日期、类型、格式、重算及模板保留功能。
★ 398 📥 149,264
office-efficiency

Gog

steipete
Google Workspace 命令行工具，支持 Gmail、日历、云端硬盘、通讯录、表格和文档。
★ 937 📥 187,626

Skill工具集 © 2026