Presentation

Let the Markdown file in your VuePress site support presentation.

Config

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

export default defineUserConfig({
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        presentation: true,
      },
    },
  }),
});

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

export default {
  theme: hopeTheme({
    plugins: {
      mdEnhance: {
        presentation: true,
      },
    },
  }),
};

vuepress-plugin-md-enhance uses reveal.js to support this feature.

presentation also receives an array of strings, allowing you to freely config whether to enable some built-in plugins.

Tips

Built-in plugins are:

• "highlight"
• "math"
• "search"
• "notes"
• "zoom"

Note: markdown plugin is enabled anyway to support markdown grammar.

Reveal.js also provides more plugins. If you need a specific plugin, please submit a Feature Request on GitHub.

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

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

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

export default defineClientConfig({
  // ...
});

Syntax

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

@slidestart [theme]

<!-- slide1 -->

---

<!-- slide2 -->

---

<!-- slide3 -->

@slideend

Theme available(replace [theme] with them):

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

For details, 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

Options

You can set reveal to pass options to reveal.js per page in frontmatter, you can also set presentation in plugin options to set reveal.js globally.

For more options, see reveal.js config. For more usage, see reveal.js documentation