@gbaudrit/revealjs-starter

Opinionated bootstrapper for Reveal.js presentations with built-in speaker view support.

Install

npm install reveal.js @gbaudrit/revealjs-speakerview @gbaudrit/revealjs-starter

Usage

index.html

<!-- all CSS stays here for easy swapping -->
<link rel="stylesheet" href="/node_modules/reveal.js/dist/reveal.css" />
<link rel="stylesheet" href="/node_modules/reveal.js/dist/theme/black.css" />
<link rel="stylesheet" href="/node_modules/reveal.js/plugin/highlight/monokai.css" />

<div class="reveal">
  <div class="slides">
    <section></section>
  </div>
</div>
<script type="module" src="./main.js"></script>

Tip: any data-markdown, data-separator, data-separator-vertical or data-separator-notes attribute already present on the <section> element takes precedence over the values passed to initReveal(). You can therefore override separators directly in the HTML without touching your JS:

<section data-separator="^=====$"></section>

main.js

import { initReveal } from '@gbaudrit/revealjs-starter';

initReveal({
  slidePath: '/slides/slides.md',
  speakerView: {
    config: {
      CURRENT_SLIDE_ZOOM: 2,
      DEFAULT_PACING_SEC: 60,
    },
  },
});

Options

initReveal({
  slidePath?: string,           // default: '/slides/slides.md'
  separators?: {
    slide?: string,             // default: '^---$'
    vertical?: string,          // default: '^--$'
    notes?: string,             // default: '^Note:'
  },
  speakerView?: SpeakerViewOptions | false,  // false to disable
  revealOptions?: Record<string, unknown>,   // merged over defaults
})

See @gbaudrit/revealjs-speakerview for SpeakerViewOptions.

License

MIT