Presentation

Add presentation in your VuePress site via Reveal.js.

Settings

Install Reveal.js in your project:

pnpm

pnpm add -D reveal.js

yarn

yarn add -D reveal.js

npm

npm i -D reveal.js

Then enabling via:

TS

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

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        revealJs: true,
      },
    },
  }),
});

JS

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

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        revealJs: true,
      },
    },
  }),
};

Plugins and themes

revealJs also receives an object as options, allowing you to control imported built-in plugins and themes.

You can enable the following plugins with revealJs.plugins with an array of plugin names:

• highlight
• math
• search
• notes
• zoom

Note

markdown plugin is enabled anyway to support markdown grammar.

You can also enable the following themes with revealJs.themes with an array of theme names:

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

By default, only auto theme is enabled.

Syntax

• Use --- to split slides
• Use -- to split the slides second time (vertical display)

@slidestart

<!-- slide1 -->

---

<!-- slide2 -->

---

<!-- slide3 -->

@slideend

By default, we use auto theme to render the presentation, but you can also use other themes with @slidestart theme-you-want.

For the appearance of each theme, see Themes demo.

Demo

Simple presentation demo

@slidestart

## Slide 1

A paragraph with some text and a [link](https://mister-hope.com)

---

## Slide 2

- Item 1
- Item 2

---

## Slide 3.1

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

--

## Slide 3.2

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

@slideend

Info

For detailed demo, please see Presentation demo

Customize Reveal.js

You can also import and call defineRevealJsConfig in client config file to customize reveal.js:

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

defineRevealJsConfig({
  // reveal.js options here
});

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

Note

Reveal.js also provides more plugins, you can add them via plugin option in defineRevealJsConfig. Built-in plugins you request at node side will be added automatically.

You can also set revealJs to pass options to reveal.js per page in frontmatter.

For reveal.js options, see reveal.js config. For reveal.js usage, see reveal.js documentation