reveal.js

The HTML Presentation Framework created by Hakim El Hattab and contributors.

You can use reveal.js directly inside VuePress as a custom component.

FullScreen mode

There's built-in support for fullscreen mode. Press F on your keyboard to view the presentation in fullscreen mode. Once in fullscreen mode, press the ESC key to exit.

Usage inside VuePress

Create a custom component

<template>
  <div id="reveal" class="reveal">
    <div class="slides">      
      <section>
        <img style="width: 50vh" data-src="/icons/logo/reveal-white-text.svg" />
        <h3>powered by</h3>
        <img style="width: 20vh" data-src="/udina-logo-signet.svg" />
      </section>
      <section>
        <h2>Agenda</h2>
        <ul>
          <li>Markdown (5 min)</li>
          <li>Coffee Break (15 min)</li>
          <li>Topic B (5 min)</li>
          <li>Q &amp; A (30 min)</li>
        </ul>
      </section>
      <section data-markdown>
        <textarea data-template>
          ## Slide 1
          A paragraph with some text and a [link](http://hakim.se).
          ---
          ## Slide 2
          comming from markdown
        </textarea>
      </section>      
      <section>
        <h2>Strategy</h2>
        <img
          class="r-stretch"
          data-src="/images/udina-integration-strategies.svg"
        />
      </section>
      <section>
        <img class="r-stretch" data-src="/images/coffee-break.svg" />
        <h2>Coffee Break</h2>
      </section>      
    </div>
  </div>
</template>

<script>
import("reveal.js/dist/reveal.css");
import("reveal.js/dist/theme/black.css");

export default {
  name: "Reveal",
  components: {},
  async mounted() {
    // use mounted import! reveal accesses dom features that avoids SSR build    
    const Reveal = (await import("reveal.js")).default;
    const Markdown = (await import("reveal.js/plugin/markdown/markdown.esm")).default;
    let deck = new Reveal(document.querySelector("#reveal"), {
      plugins: [ Markdown ],
      embedded: true,
      keyboardCondition: "focused",
      navigationMode: "linear",
      transition: "zoom",
      backgroundTransition: "zoom",
      hash: true,
    });
    deck.initialize();
  },
};
</script>

<style scoped>
#reveal {
  aspect-ratio: 16 / 9;
}
/* reset */
h1,h2,h3,h4,h5,h6 {
  border: none;
  margin: 0;
  padding: 0;
}
</style>

Use the component inside markdown

You can directly use your custom component from anywhere inside your markdown.

<ClientOnly>
  <Reveal/>
</ClientOnly>

External Markdown

You can write your content as a separate file and have reveal.js load it at runtime.

<section data-markdown="example.md"
         data-separator="^\n\n\n"
         data-separator-vertical="^\n\n"
         data-separator-notes="^Note:"
         data-charset="iso-8859-15">
    <!--
        Note that Windows uses `\r\n` instead of `\n` as its linefeed character.
        For a regex that supports all operating systems, use `\r?\n` instead of `\n`.
    -->
</section>