Presentation
Add presentation in your VuePress site via Reveal.js.
Settings
Install Reveal.js in your project:
pnpm add -D reveal.js
yarn add -D reveal.js
npm i -D reveal.js
Then enabling via:
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
@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