幻灯片支持

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

配置

在你的项目中安装 Reveal.js:

pnpm

pnpm add -D reveal.js

yarn

yarn add -D reveal.js

npm

npm i -D reveal.js

之后启用它:

TS

// .vuepress/config.ts
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhancePlugin({
      // 启用幻灯片
      revealJs: true,
    }),
  ],
};

JS

// .vuepress/config.js
import { mdEnhancePlugin } from "vuepress-plugin-md-enhance";

export default {
  plugins: [
    mdEnhancePlugin({
      // 启用幻灯片
      revealJs: true,
    }),
  ],
};

插件与主题

revealJs 也接收一个配置对象，允许你控制导入的内置此插件和主题。

你可以通过将 revealJs.plugins 设置为插件名称数组来启用以下插件:

• highlight
• math
• search
• notes
• zoom

注

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

你也可以通过将 revealJs.themes 设置为主题名称数组来启用以下主题:

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

默认情况下，只有 auto 主题被启用。

语法

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

@slidestart

<!-- slide1 -->

---

<!-- slide2 -->

---

<!-- slide3 -->

@slideend

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

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

演示

请见 幻灯片演示。

自定义 Reveal.js

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

// .vuepress/client.ts
import { defineClientConfig } from "@vuepress/client";
import { defineRevealJsConfig } from "vuepress-plugin-md-enhance/client";

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

export default defineClientConfig({
  // ...
});

注

Reveal.js 还提供了更多的插件，你可以通过 plugin 选项在 defineRevealJsConfig 中添加它们。在 Node 一侧要求的内置插件将自动添加。

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

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