VuePress 生态系统VuePress 生态系统
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • AI 插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • 主题指南
  • 默认主题
  • Hope 主题
  • Plume 主题
  • Reco 主题
  • 功能插件
  • Markdown 插件
  • 搜索插件
  • 博客插件
  • 渐进式应用插件
  • 统计分析插件
  • 搜索引擎优化插件
  • 开发插件
  • 工具插件
  • AI 插件
  • @vuepress/helper
  • English
  • 简体中文
GitHub
  • append-date
  • markdown-container
  • markdown-ext
  • markdown-image
  • markdown-include
  • markdown-hint
  • markdown-math
  • markdown-stylize
  • markdown-tab
  • links-check
  • prismjs
  • revealjs
    • revealjs
    • 幻灯片演示
    • 幻灯片主题
  • shiki

revealjs

@vuepress/plugin-revealjs

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

使用

npm i -D @vuepress/plugin-revealjs@next
.vuepress/config.js
import { revealJsPlugin } from '@vuepress/plugin-revealjs'

export default {
  plugins: [
    revealJsPlugin({
      // 插件选项
    }),
  ],
}

幻灯片语法

  • 使用 --- 分割幻灯片
  • 使用 -- 对幻灯片进行二次分割(垂直显示)
@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 在浏览器中处理,因此你只能在幻灯片中使用绝对路径的资源,这些资源必须可以直接在浏览器中访问,不支持相对路径或别名。

幻灯片布局

默认情况下,插件会注册一个 SlidePage 布局来供你渲染“幻灯片页”。

在使用此布局的页面中,你应该只包含单个幻灯片语法,不包含其他内容,以避免渲染问题:

---
layout: SlidePage
---

@slidestart

<!-- 此处是幻灯片内容 -->

@slideend

你可以通过插件选项中的 layout 来自定义此行为,比如使用 false 来禁用它或填入其他布局名称。

演示

请见 幻灯片演示。

自定义 Reveal.js

内置插件

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

  • highlight
  • math
  • search
  • notes
  • zoom

注

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

高级配置

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

defineRevealJsConfig 函数接受一个 ref、getter 或普通对象作为 reveal.js 选项:

.vuepress/client.ts
import { defineRevealJsConfig } from '@vuepress/plugin-revealjs/client'

// 普通对象
const options1 = {
  // 选项
}

// 或 getter
const options2 = () => ({
  // 选项
})

// 或 ref
const options3 = ref({
  // 选项
})

defineRevealJsConfig(options1or2or3)

注

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

页面级配置

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

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

选项

plugins

  • 类型: RevealJsPlugin[]

  • 详情:需要启用 Reveal.js 内置的插件

    可用值:highlight、math、search、notes、zoom

themes

  • 类型: RevealJsTheme[]

  • 默认值:['auto']

  • 详情:需要启用的 Reveal.js 主题

    可用值:auto、black、white、league、beige、sky、night、serif、simple、solarized、blood、moon

layout

  • 类型: string | false
  • 默认值:'SlidePage'
  • 详情:用于渲染幻灯片的布局组件名称

样式

你可以通过 CSS 变量自定义样式:

:root {
  --reveal-c-accent: var(--vp-c-accent);
  --reveal-c-control: var(--vp-c-control);
  --reveal-c-control-hover: var(--vp-c-control-hover);
  --reveal-c-shadow: var(--vp-c-shadow);
}
在 GitHub 上编辑此页
上次更新: 2025/5/8 08:39
贡献者: Mister-Hope, ycyin
上一页
prismjs
下一页
shiki