revealjs
Add presentation in your VuePress site via Reveal.js.
Usage
npm i -D @vuepress/plugin-prismjs@next
import { revealJsPlugin } from '@vuepress/plugin-revealjs'
export default {
plugins: [
revealJsPlugin({
// plugin options
}),
],
}
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.
Slide Layout
By default, the plugin registers a layout named SlidePage
for you to render "a slides page".
In pages using this layout, you should only include a single slide syntax and no other contents 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:
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
Options
plugins
Type:
RevealJsPlugin[]
Details: Built-in reveal 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
delay
- Type:
number
- Default:
800
- Details: Delay time 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);
}