幻灯片

在你的 VuePress 站点中添加幻灯片。

配置

在你的项目中安装 @vuepress/plugin-revealjs:

pnpm

pnpm add -D @vuepress/plugin-revealjs@next

yarn

yarn add -D @vuepress/plugin-revealjs@next

npm

npm i -D @vuepress/plugin-revealjs@next

之后启用它:

.vuepress/theme.ts

import { 
hopeTheme
 } from "vuepress-theme-hope";

export default 
hopeTheme
({
  
markdown
: {
    
revealjs
: true,
  },
});

幻灯片语法

• 使用 --- 分割幻灯片
• 使用 -- 对幻灯片进行二次分割(垂直显示)

@slidestart

<!-- slide1 -->

---

<!-- slide2 -->

---

<!-- slide3 -->

@slideend

示例

@slidestart

## 幻灯片标题

一个拥有文字和 [链接](https://mister-hope.com) 的段落

---

## 代码高亮

```js [2-4|1-5]
const add = (a, b) => {
  if (typeof b === "undefined") return a + 1;

  return a + b;
};
```

@slideend

默认情况下，我们使用 auto 主题来渲染幻灯片，你也可以通过 @slidestart 主题名称 使用其他主题。

你可以通过插件选项中的 themes 启用以下主题:

• auto (默认)
• black
• white
• league
• beige
• sky
• night
• serif
• simple
• solarized
• blood
• moon

各主题的外观，详见 幻灯片主题。

资源路径

由于 @slidestart 和 @slideend 之间的 Markdown 内容由 Reveal.js 在浏览器中处理，因此你只能在幻灯片中使用绝对路径的资源，这些资源必须可以直接在浏览器中访问，不支持相对路径或别名。

演示

简单幻灯片演示

@slidestart

## 幻灯片 1

一个有文字和 [链接](https://mister-hope.com) 的段落

---

## 幻灯片 2

- 项目 1
- 项目 2

---

## 幻灯片 3.1

```js
const a = 1;
```

--

## 幻灯片 3.2

$$
J(\theta_0,\theta_1) = \sum_{i=0}
$$

@slideend

相关信息

详细与完整的演示详见 幻灯片演示。

自定义 Reveal.js

内置插件

你可以通过插件选项中的 plugins 启用 reveal.js 中的内置插件。它接受以下插件名称的数组:

• highlight
• math
• search
• notes
• zoom

注

为了支持 Markdown 语法，我们总会启用 markdown 插件。

高级配置

你也可以在客户端配置文件 中导入并调用 defineRevealJsConfig 来自定义 reveal.js:

.vuepress/client.ts

import { 
defineRevealJsConfig
 } from "@vuepress/plugin-revealjs/client";

defineRevealJsConfig
({
  // 在此设置 reveal.js 选项
});

注

Reveal.js 还提供了更多的插件，你可以通过 plugin 选项在 defineRevealJsConfig 中添加它们，这种自定义行为不会影响你声明的内置插件。

页面级配置

你也可以在 Frontmatter 设置 revealJs 以设置特定页面的 reveal.js 选项。

Reveal.js 选项，请参见reveal.js config，Reveal.js 用法，请参阅 reveal.js 文档。