Presentation

Add presentation in your VuePress site via Reveal.js.

Settings

Install @vuepress/plugin-revealjs in your project:

pnpm

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

yarn

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

npm

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

Then enabling via:

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

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

Slide Syntax

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

@slidestart

<!-- slide1 -->

---

<!-- slide2 -->

---

<!-- slide3 -->

@slideend

A basic demo

@slidestart

## Slide Title

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

---

## Highlight

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

  return a + b;
};
```

@slideend

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

You can enable the following themes in reveal.js via themes in plugin options:

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

For the appearance of each theme, see Themes demo.

Assets Path

Since markdown contents between @slidestart and @slideend are handled by Reveal.js at browser, so you can only use absolute paths for assets in slides, which must be accessible directly in browser, relative paths or alias are not supported.

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 revealjs-demo.

Customize Reveal.js

Built-in Plugins

You can enable built-in plugins in reveal.js via plugins in plugin options. It accepts an array of the following plugin names:

• highlight
• math
• search
• notes
• zoom

Note

markdown plugin is enabled anyway to support markdown grammar.

Advanced Configuration

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

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

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

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.

Per Page Configuration

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