revealjs

@vuepress/plugin-revealjs

Add presentation in your VuePress site via Reveal.js.

Usage

npm i -D @vuepress/plugin-revealjs@next
.vuepress/config.js
import { revealJsPlugin } from '@vuepress/plugin-revealjs'

export default {
  plugins: [
    revealJsPlugin({
      // plugin options
    }),
  ],
}

Slide Syntax

  • Use --- to split slides
  • Use -- to split slides vertically
@slidestart

<!-- slide1 -->

---

<!-- slide2 -->

---

<!-- slide3 -->

@slideend
Slide 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 content between @slidestart and @slideend is handled by Reveal.js in the browser, you can only use absolute paths for assets in slides, which must be directly accessible in the browser. Relative paths or aliases are not supported.

Slide Layout

By default, the plugin registers a layout named SlidePage for you to render slides pages.

In pages using this layout, you should only include a single slide syntax and no other content to avoid rendering problems.

---
layout: SlidePage
---

@slidestart

<!-- slide content here -->

@slideend

You can customize this behavior via layout in plugin options with false to disable it or another layout name.

Demo

Please see Slides 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:

The defineRevealJsConfig function accepts a ref, getter or plain object as reveal.js options:

.vuepress/client.js
import { defineRevealJsConfig } from '@vuepress/plugin-revealjs/client'

// plain object
const options1 = {
  // options
}

// or getter
const options2 = () => ({
  // options
})

// or ref
const options3 = ref({
  // options
})

defineRevealJsConfig(options1or2or3)

Note

Reveal.js also provides more plugins, you can add them via plugins 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

Options

plugins

  • Type: RevealJsPlugin[]

  • Details: Built-in reveal.js plugins to enable.

    Available values: highlight, math, search, notes, zoom

themes

  • Type: RevealJsTheme[]

  • Default: ['auto']

  • Details: Themes to enable.

    Available values: auto, black, white, league, beige, sky, night, serif, simple, solarized, blood, moon

layout

  • Type: string | false
  • Default: 'SlidePage'
  • Details: Layout component name to render slides.

Styles

You can customize the style via CSS variables:

: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);
}