revealjs
在你的 VuePress 中添加幻灯片。
使用
npm i -D @vuepress/plugin-revealjs@nextimport { 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(默认)blackwhiteleaguebeigeskynightserifsimplesolarizedbloodmoon
各主题的外观，详见 幻灯片主题
资源路径
由于 @slidestart 和 @slideend 之间的 Markdown 内容由 Reveal.js 在浏览器中处理，因此你只能在幻灯片中使用绝对路径的资源，这些资源必须可以直接在浏览器中访问，不支持相对路径或别名。
幻灯片布局
默认情况下，插件会注册一个 SlidePage 布局来供你渲染幻灯片页面。
在使用此布局的页面中，你应该只包含单个幻灯片语法，不包含其他内容，以避免渲染问题:
---
layout: SlidePage
---
@slidestart
<!-- 此处是幻灯片内容 -->
@slideend你可以通过插件选项中的 layout 来自定义此行为，比如使用 false 来禁用它或填入其他布局名称。
演示
请见 幻灯片演示。
自定义 Reveal.js
内置插件
你可以通过插件选项中的 plugins 启用 reveal.js 中的内置插件。它接受以下插件名称的数组:
highlightmathsearchnoteszoom
注
为了支持 Markdown 语法，我们总会启用 markdown 插件。
高级配置
你也可以在客户端配置文件中导入并调用 defineRevealJsConfig 来自定义 reveal.js:
defineRevealJsConfig 函数接受一个 ref、getter 或普通对象作为 reveal.js 选项:
import { defineRevealJsConfig } from '@vuepress/plugin-revealjs/client'
// 普通对象
const options1 = {
// 选项
}
// 或 getter
const options2 = () => ({
// 选项
})
// 或 ref
const options3 = ref({
// 选项
})
defineRevealJsConfig(options1or2or3)注
Reveal.js 还提供了更多的插件，你可以通过 defineRevealJsConfig 中的 plugins 选项添加它们。你在 node 端请求的内置插件将自动添加。
页面级配置
你也可以在 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']详情：要启用的主题。
可用值：
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);
}