Skip to main content


Less than 1 minuteMarkdownMarkdownSlides

Add presentation in your VuePress site via Reveal.js.


Install Reveal.jsopen in new window in your project:

pnpm add -D reveal.js

Then enabling via:

// .vuepress/config.ts
import { defineUserConfig } from "vuepress";
import { hopeTheme } from "vuepress-theme-hope";

export default defineUserConfig({
  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


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.


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

<!-- slide1 -->


<!-- slide2 -->


<!-- slide3 -->


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.


Simple presentation demo

## Slide 1

A paragraph with some text and a [link](


## Slide 2

- Item 1
- Item 2


## Slide 3.1

const a = 1;


## Slide 3.2

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



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:

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

  // reveal.js options here

export default defineClientConfig({
  // ...


Reveal.js also provides more pluginsopen in new window, 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 configopen in new window. For reveal.js usage, see reveal.js documentationopen in new window