### Full Setup and Development Commands

Source: https://github.com/reveal/revealjs.com/blob/master/src/installation.md

Commands to clone the repository, install dependencies, and start the development server for reveal.js.

```shell
git clone https://github.com/hakimel/reveal.js.git
cd reveal.js && npm install
npm start
```

--------------------------------

### Install Dependencies and Start Development Server

Source: https://github.com/reveal/revealjs.com/blob/master/README.md

Installs project dependencies using Yarn and starts the development server. The server provides automatic reloading for changes made during development.

```sh
yarn
yarn start
```

--------------------------------

### Install @revealjs/react

Source: https://github.com/reveal/revealjs.com/blob/master/src/react.md

Installation command for the @revealjs/react package and its peer dependencies using npm or yarn.

```bash
npm i @revealjs/react reveal.js react react-dom
# or
yarn add @revealjs/react reveal.js react react-dom
```

--------------------------------

### Install Reveal.js via npm or yarn

Source: https://context7.com/reveal/revealjs.com/llms.txt

Demonstrates how to install the reveal.js framework as an npm package for use in modern JavaScript projects. This allows for integration with build tools and ES module imports.

```bash
# Install via npm
npm install reveal.js

# Or via yarn
yarn add reveal.js
```

--------------------------------

### Math Plugin Initialization

Source: https://github.com/reveal/revealjs.com/blob/master/src/math.md

Example of initializing reveal.js with the Math plugin enabled, using KaTeX as the typesetting library.

```APIDOC
## Initialization with Math Plugin

### Description
This snippet shows how to include the Math plugin and initialize reveal.js with KaTeX support.

### Method
JavaScript Initialization

### Endpoint
N/A

### Parameters
N/A

### Request Example
```html
<script src="plugin/math/math.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealMath.KaTeX]
  });
</script>
```

### Response
N/A
```

--------------------------------

### Install reveal.js via npm

Source: https://github.com/reveal/revealjs.com/blob/master/src/react-legacy.md

Command to install the reveal.js package as a dependency in your project.

```bash
npm install reveal.js
```

--------------------------------

### Configure Development Server Port

Source: https://github.com/reveal/revealjs.com/blob/master/src/installation.md

Command to start the reveal.js development server on a custom port.

```shell
npm start -- --port=8001
```

--------------------------------

### Install Reveal.js React Dependencies

Source: https://context7.com/reveal/revealjs.com/llms.txt

Use npm to install the necessary packages for running reveal.js within a React project.

```bash
npm i @revealjs/react reveal.js react react-dom
```

--------------------------------

### Configuring Reveal.js Deck with Options and Plugins

Source: https://github.com/reveal/revealjs.com/blob/master/src/react.md

Provides an example of setting up the `Deck` component with custom reveal.js configuration options and plugins. This includes setting presentation dimensions, hash navigation, and transition effects, along with integrating the highlight plugin.

```tsx
import { Deck, Slide } from '@revealjs/react';
import 'reveal.js/reveal.css';
import 'reveal.js/theme/black.css';
import 'reveal.js/plugin/highlight/monokai.css';
import RevealHighlight from 'reveal.js/plugin/highlight';

export function Presentation() {
  return (
    <Deck
      config={{
        width: 1280,
        height: 720,
        hash: true,
        transition: 'slide',
      }}
      plugins={[RevealHighlight]}>
      <Slide>Configured deck</Slide>
    </Deck>
  );
}
```

--------------------------------

### Video Background Setup

Source: https://github.com/reveal/revealjs.com/blob/master/src/_includes/demo.html

Shows how to use a video file as the background for a reveal.js slide. Multiple video formats can be provided for broader compatibility.

```html
<section data-background-video="video.mp4,video.webm"></section>
```

--------------------------------

### Install reveal.js via Package Manager

Source: https://github.com/reveal/revealjs.com/blob/master/src/installation.md

Commands to add reveal.js as a dependency to your project using npm or yarn.

```shell
npm install reveal.js
yarn add reveal.js
```

--------------------------------

### Image Background Setup

Source: https://github.com/reveal/revealjs.com/blob/master/src/_includes/demo.html

Demonstrates how to set an image as the background for a reveal.js slide using the `data-background` attribute.

```html
<section data-background="image.png"></section>
```

--------------------------------

### Setting Line Number Offset

Source: https://github.com/reveal/revealjs.com/blob/master/src/code.md

Demonstrates how to start line numbering from a specific integer using the data-ln-start-from attribute.

```html
<pre><code data-line-numbers data-ln-start-from="7">
<tr>
  <td>Oranges</td>
  <td>$2</td>
  <td>18</td>
</tr>
</code></pre>
```

--------------------------------

### Implement an Asynchronous Plugin

Source: https://github.com/reveal/revealjs.com/blob/master/src/creating-plugins.md

Illustrates how to return a Promise in the init function to delay reveal.js initialization, useful for loading external resources or performing async setup tasks.

```javascript
let WaitForIt = {
  id: 'wait-for-it',
  init: (deck) => {
    return new Promise((resolve) => setTimeout(resolve, 3000));
  },
};

Reveal.initialize({ plugins: [WaitForIt] }).then(() => {
  console.log('Three seconds later...');
});
```

--------------------------------

### Create React Presentation Components

Source: https://context7.com/reveal/revealjs.com/llms.txt

Implement a presentation using the Deck and Slide components. This example demonstrates custom hooks, slide nesting, fragments, code blocks, and markdown integration.

```tsx
import { Deck, Slide, Stack, Fragment, Code, Markdown, useReveal } from '@revealjs/react';
import 'reveal.js/reveal.css';
import 'reveal.js/theme/black.css';
import 'reveal.js/plugin/highlight/monokai.css';
import RevealHighlight from 'reveal.js/plugin/highlight';

function NextButton() {
  const deck = useReveal();
  return <button onClick={() => deck?.next()}>Next</button>;
}

export function Presentation() {
  return (
    <Deck
      config={{ width: 1280, height: 720, hash: true, transition: 'slide' }}
      plugins={[RevealHighlight]}
      onReady={(deck) => console.log('Ready')}
      onSlideChange={(event) => console.log('Slide:', event.indexh)}
    >
      <Slide>
        <h1>Hello</h1>
        <NextButton />
      </Slide>
      <Slide background="#111827" autoAnimate>
        <h2>Styled Slide</h2>
      </Slide>
      <Stack>
        <Slide>Vertical 1</Slide>
        <Slide>Vertical 2</Slide>
      </Stack>
      <Slide>
        <Fragment as="p">First point</Fragment>
        <Fragment as="p" animation="fade-up">Second point</Fragment>
        <Fragment as="p" animation="highlight-red" index={1}>Third point</Fragment>
      </Slide>
      <Slide>
        <Code language="javascript" lineNumbers="1|2-3">
          {`const a = 1;\nconst b = 2;\nconst c = a + b;`}
        </Code>
      </Slide>
      <Markdown separator="---" verticalSeparator="--">
        {`\n          ## Markdown Slide\n\n          Content with **bold** text.\n\n          ---\n\n          ## Another Slide\n        `}
      </Markdown>
    </Deck>
  );
}
```

--------------------------------

### Sending Commands via postMessage

Source: https://github.com/reveal/revealjs.com/blob/master/src/postmessage.md

Demonstrates how to send commands to a reveal.js presentation embedded in another window using the postMessage API. This example shows how to navigate to a specific slide.

```APIDOC
## POST /postMessage

### Description
Sends a command to a reveal.js presentation in another window.

### Method
POST (via window.postMessage)

### Endpoint
Target window containing reveal.js

### Parameters
#### Request Body
- **message** (string) - Required - A JSON string containing the method to call and its arguments. Example: `{"method": "slide", "args": [2]}`
- **targetOrigin** (string) - Required - The origin of the target window. Use `'*'` for any origin (use with caution).

### Request Example
```json
{
  "method": "slide",
  "args": [2]
}
```

### Response
#### Success Response (200)
N/A (Communication is asynchronous via postMessage events)

#### Response Example
N/A
```

--------------------------------

### Tiled Background Setup

Source: https://github.com/reveal/revealjs.com/blob/master/src/_includes/demo.html

Configures a repeating background image for a reveal.js slide. The `data-background-repeat` and `data-background-size` attributes control the tiling behavior.

```html
<section data-background="image.png" data-background-repeat="repeat" data-background-size="100px"></section>
```

--------------------------------

### Initialize reveal.js in React Component

Source: https://github.com/reveal/revealjs.com/blob/master/src/react-legacy.md

A complete example of using useEffect and useRef to initialize and clean up a reveal.js instance within a React functional component.

```tsx
import { useEffect, useRef } from 'react';
import Reveal from 'reveal.js';
import type { RevealApi } from 'reveal.js';
import 'reveal.js/reveal.css';
import 'reveal.js/theme/black.css';

function App() {
  const deckDivRef = useRef<HTMLDivElement>(null);
  const deckRef = useRef<RevealApi | null>(null);

  useEffect(() => {
    if (deckRef.current) return;

    deckRef.current = new Reveal(deckDivRef.current!, {
      transition: 'slide',
    });

    deckRef.current.initialize().then(() => {});

    return () => {
      try {
        if (deckRef.current) {
          deckRef.current.destroy();
          deckRef.current = null;
        }
      } catch (e) {
        console.warn('Reveal.js destroy call failed.');
      }
    };
  }, []);

  return (
    <div className="reveal" ref={deckDivRef}>
      <div className="slides">
        <section>Slide 1</section>
        <section>Slide 2</section>
      </div>
    </div>
  );
}

export default App;
```

--------------------------------

### Reveal.js Plugin Management API (JavaScript)

Source: https://github.com/reveal/revealjs.com/blob/master/src/plugins.md

Illustrates how to use the reveal.js API to check for the presence of plugins, retrieve plugin instances, and get a list of all registered plugins. This is useful for dynamic plugin interaction.

```javascript
import Reveal from 'dist/reveal.mjs';
import Markdown from 'dist/plugin/markdown.mjs';
import Highlight from 'dist/plugin/highlight.mjs';

Reveal.initialize({ plugins: [Markdown, Highlight] });

Reveal.hasPlugin('markdown');
// true

Reveal.getPlugin('markdown');
// { id: "markdown", init: ... }

Reveal.getPlugins();
// {
//   markdown: { id: "markdown", init: ... },
//   highlight: { id: "highlight", init: ... }
// }
```

--------------------------------

### Receiving Callbacks via postMessage

Source: https://github.com/reveal/revealjs.com/blob/master/src/postmessage.md

Details how to receive return values from methods called via the postMessage API. This example shows how to get the total number of slides.

```APIDOC
## GET /postMessage Callbacks

### Description
Receives the return value from a method invoked via the postMessage API.

### Method
GET (via window.addEventListener('message'))

### Endpoint
Parent window

### Parameters
#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
// First, send the method call
<revealWindow>.postMessage( JSON.stringify({ method: 'getTotalSlides' }), '*' );

// Then, listen for the callback
window.addEventListener( 'message', event => {
  var data = JSON.parse( event.data );
  if( data.namespace === 'reveal' && data.eventName === 'callback' && data.method === 'getTotalSlides' ) {
    console.log('Total slides:', data.result);
  }
} );
```

### Response
#### Success Response (200)
- **namespace** (string) - The namespace of the callback (e.g., 'reveal').
- **eventName** (string) - The event name, typically 'callback'.
- **method** (string) - The name of the method that was called.
- **result** (any) - The return value of the invoked method.

#### Response Example
```json
{
  "namespace": "reveal",
  "eventName": "callback",
  "method": "getTotalSlides",
  "result": 10
}
```
```

--------------------------------

### Initialize Reveal.js with Plugins (HTML)

Source: https://github.com/reveal/revealjs.com/blob/master/src/plugins.md

Demonstrates how to include a plugin script and initialize reveal.js with the plugin using standard HTML script tags. This is the basic method for integrating plugins.

```html
<script src="dist/plugin/markdown.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealMarkdown],
  });
</script>
```

--------------------------------

### Initialize Reveal.js Presentation

Source: https://github.com/reveal/revealjs.com/blob/master/src/initialization.md

Demonstrates how to initialize a standard reveal.js presentation using the global Reveal object and how to handle the initialization promise.

```html
<script src="dist/reveal.js"></script>
<script>
  Reveal.initialize({ transition: 'none' });
</script>
```

```javascript
Reveal.initialize().then(() => {
  // reveal.js is ready
});
```

--------------------------------

### Initialize Reveal.js with Math Plugin

Source: https://github.com/reveal/revealjs.com/blob/master/src/math.md

This snippet demonstrates how to register the KaTeX math plugin during the Reveal.js initialization process.

```html
<script src="plugin/math/math.js"></script>
<script>
  Reveal.initialize({ plugins: [RevealMath.KaTeX] });
</script>
```

--------------------------------

### GET /reveal/state

Source: https://github.com/reveal/revealjs.com/blob/master/src/presentation-state.md

Retrieves the current state of the presentation as a snapshot object.

```APIDOC
## GET /reveal/state

### Description
Retrieves a snapshot object containing the current presentation state, including horizontal and vertical slide indices, fragment index, and view modes.

### Method
GET

### Endpoint
Reveal.getState()

### Parameters
None

### Response
#### Success Response (200)
- **indexh** (number) - Horizontal slide index
- **indexv** (number) - Vertical slide index
- **indexf** (number) - Current fragment index
- **paused** (boolean) - Whether the presentation is paused
- **overview** (boolean) - Whether the overview mode is active

#### Response Example
{
  "indexh": 1,
  "indexv": 0,
  "indexf": null,
  "paused": false,
  "overview": false
}
```

--------------------------------

### Configure Global Background Transitions

Source: https://github.com/reveal/revealjs.com/blob/master/src/transitions.md

Demonstrates how to set the default background transition effect for the entire presentation using the Reveal.initialize configuration object.

```javascript
Reveal.initialize({
  backgroundTransition: 'slide',
});
```

--------------------------------

### Configure Reveal.js Highlight Plugin

Source: https://context7.com/reveal/revealjs.com/llms.txt

Sets up the Highlight plugin for syntax highlighting and demonstrates how to display code blocks with line numbers, custom offsets, and step-through animations.

```html
<link rel="stylesheet" href="dist/plugin/highlight/monokai.css" />
<script src="dist/plugin/highlight.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealHighlight],
    highlight: {
      highlightOnLoad: true
    }
  });
</script>

<section>
  <pre><code data-line-numbers="3-5|8-10" data-trim>
<table>
  <tr><td>Apples</td><td>$1</td></tr>
  <tr><td>Oranges</td><td>$2</td></tr>
</table>
  </code></pre>
</section>
```

--------------------------------

### Registering Reveal.js Plugins

Source: https://github.com/reveal/revealjs.com/blob/master/src/upgrading.md

Demonstrates the updated syntax for initializing Reveal.js with external plugins. This approach requires including the plugin script files and passing them into the plugins array within the Reveal.initialize configuration object.

```html
<script src="dist/reveal.js"></script>
<script src="plugin/markdown/markdown.js"></script>
<script src="plugin/highlight/highlight.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealMarkdown, RevealHighlight],
  });
</script>
```

--------------------------------

### Initialize Reveal.js with Configuration Options

Source: https://github.com/reveal/revealjs.com/blob/master/src/config.md

Demonstrates how to initialize a reveal.js presentation using a configuration object. This object allows for fine-tuning of navigation controls, slide behavior, layout settings, and accessibility features.

```javascript
Reveal.initialize({
  controls: true,
  controlsTutorial: true,
  controlsLayout: 'bottom-right',
  controlsBackArrows: 'faded',
  progress: true,
  slideNumber: false,
  showSlideNumber: 'all',
  hashOneBasedIndex: false,
  hash: false,
  respondToHashChanges: true,
  jumpToSlide: true,
  history: false,
  keyboard: true,
  keyboardCondition: null,
  disableLayout: false,
  overview: true,
  center: true,
  touch: true,
  loop: false,
  rtl: false,
  navigationMode: 'default',
  shuffle: false,
  fragments: true,
  fragmentInURL: true,
  embedded: false,
  help: true,
  pause: true,
  showNotes: false
});
```

--------------------------------

### Implementing Step-by-Step Highlights

Source: https://github.com/reveal/revealjs.com/blob/master/src/code.md

Enables sequential highlighting of code lines by providing a pipe-delimited string to the data-line-numbers attribute.

```html
<pre><code data-line-numbers="3-5|8-10|13-15">
<table>
  <tr>
    <td>Apples</td>
    <td>$1</td>
    <td>7</td>
  </tr>
  <tr>
    <td>Oranges</td>
    <td>$2</td>
    <td>18</td>
  </tr>
  <tr>
    <td>Kiwi</td>
    <td>$3</td>
    <td>1</td>
  </tr>
</table>
</code></pre>
```

--------------------------------

### Configure Reveal.js Presentation Options

Source: https://context7.com/reveal/revealjs.com/llms.txt

Illustrates how to initialize a Reveal.js presentation with various configuration options. This includes settings for controls, progress bar, slide numbers, navigation behavior, appearance, size, auto-sliding, fragments, and plugins.

```javascript
Reveal.initialize({
  // Display controls
  controls: true,
  controlsTutorial: true,
  controlsLayout: 'bottom-right',

  // Progress bar
  progress: true,

  // Slide numbers: true, false, 'h.v', 'h/v', 'c', 'c/t'
  slideNumber: 'c/t',

  // Navigation
  hash: true,
  history: true,
  keyboard: true,
  overview: true,
  touch: true,
  loop: false,

  // Appearance
  center: true,
  transition: 'slide', // none/fade/slide/convex/concave/zoom
  transitionSpeed: 'default', // default/fast/slow
  backgroundTransition: 'fade',

  // Presentation size
  width: 960,
  height: 700,
  margin: 0.04,
  minScale: 0.2,
  maxScale: 2.0,

  // Auto-slide (milliseconds, 0 = disabled)
  autoSlide: 0,
  autoSlideStoppable: true,

  // Fragments
  fragments: true,
  fragmentInURL: true,

  // Plugins
  plugins: [RevealMarkdown, RevealHighlight, RevealNotes]
}).then(() => {
  console.log('reveal.js is ready');
});
```

--------------------------------

### Customize Auto-Slide Navigation Method

Source: https://github.com/reveal/revealjs.com/blob/master/src/auto-slide.md

Configures the autoSlideMethod to define custom navigation behavior during auto-sliding. This example restricts navigation to horizontal slides only.

```javascript
Reveal.configure({
  autoSlideMethod: () => Reveal.right(),
});
```

--------------------------------

### Configuring Highlight Plugin

Source: https://github.com/reveal/revealjs.com/blob/master/src/code.md

Shows the necessary CSS and JavaScript includes to initialize the highlight plugin in a reveal.js presentation.

```html
<link rel="stylesheet" href="dist/plugin/highlight/monokai.css" />
<script src="dist/plugin/highlight.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealHighlight],
  });
</script>
```

--------------------------------

### Markdown Slide Attributes

Source: https://github.com/reveal/revealjs.com/blob/master/src/markdown.md

Shows how to apply attributes to the generated slide `<section>` elements using HTML comments, for example, setting background colors.

```APIDOC
## GET /api/products

### Description
Retrieves a list of all available products.

### Method
GET

### Endpoint
/api/products

### Query Parameters
- **category** (string) - Optional - Filters products by category.
- **limit** (integer) - Optional - Limits the number of products returned.
- **offset** (integer) - Optional - Skips a number of products for pagination.

### Response
#### Success Response (200)
- **products** (array) - A list of product objects.
  - **id** (string) - The unique identifier for the product.
  - **name** (string) - The name of the product.
  - **price** (number) - The price of the product.
  - **category** (string) - The category of the product.

#### Response Example
```json
{
  "products": [
    {
      "id": "prod-abc",
      "name": "Laptop",
      "price": 1200.50,
      "category": "Electronics"
    },
    {
      "id": "prod-def",
      "name": "Desk Chair",
      "price": 250.00,
      "category": "Furniture"
    }
  ]
}
```
```

--------------------------------

### Implement Media Lightbox

Source: https://github.com/reveal/revealjs.com/blob/master/src/media.md

Shows how to trigger a full-screen media overlay when an element is clicked by using specific data-preview attributes.

```html
<img src="reveal.png" data-preview-video="video.mp4">
<a href="https://hakim.se" data-preview-link>Open Link</a>
```

--------------------------------

### Receiving Events via postMessage

Source: https://github.com/reveal/revealjs.com/blob/master/src/postmessage.md

Explains how to listen for messages from a reveal.js presentation, specifically for event bubbling. This example shows how to capture slide change events.

```APIDOC
## GET /postMessage Events

### Description
Listens for events dispatched by a reveal.js presentation running in an iframe.

### Method
GET (via window.addEventListener('message'))

### Endpoint
Parent window

### Parameters
#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```javascript
window.addEventListener('message', (event) => {
  var data = JSON.parse(event.data);
  if (data.namespace === 'reveal' && data.eventName === 'slidechanged') {
    // Slide changed, see data.state for slide number
    console.log('Slide changed to:', data.state);
  }
});
```

### Response
#### Success Response (200)
- **namespace** (string) - The namespace of the event (e.g., 'reveal').
- **eventName** (string) - The name of the event (e.g., 'slidechanged').
- **state** (object) - The state associated with the event (e.g., current slide information).

#### Response Example
```json
{
  "namespace": "reveal",
  "eventName": "slidechanged",
  "state": {
    "indexh": 0,
    "indexv": 1,
    "indexf": 0,
    "slide": "<section>...</section>",
    "overview": false
  }
}
```
```

--------------------------------

### Markdown Slide Integration

Source: https://github.com/reveal/revealjs.com/blob/master/src/_includes/demo.html

Example of how to use Markdown within reveal.js slides. The `data-markdown` attribute enables content to be written in Markdown format, which is then rendered by reveal.js.

```html
<section data-markdown>
## Markdown support
Write content using inline or external Markdown. Instructions and more info available in the [readme](https://revealjs.com/markdown/).
</section>
```

--------------------------------

### Initialize Reveal.js with Plugins (ES Modules)

Source: https://github.com/reveal/revealjs.com/blob/master/src/plugins.md

Shows how to import and initialize reveal.js with plugins using ES modules. This approach is suitable for modern JavaScript development workflows.

```html
<script type="module">
  import Reveal from 'dist/reveal.mjs';
  import Markdown from 'dist/plugin/markdown.mjs';
  Reveal.initialize({
    plugins: [Markdown],
  });
</script>
```

--------------------------------

### Clone reveal.js.com Repository

Source: https://github.com/reveal/revealjs.com/blob/master/README.md

Clones the reveal.js.com repository and navigates into the project directory. This is the first step to setting up the project locally.

```sh
git clone https://github.com/reveal/revealjs.com.git && cd revealjs.com
```

--------------------------------

### React Component Example

Source: https://github.com/reveal/revealjs.com/blob/master/src/_includes/demo.html

A basic React functional component demonstrating state management with the useState hook. This is often used within reveal.js presentations to showcase interactive elements.

```javascript
import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    ...
  );
}
```

--------------------------------

### Register a Plugin via Configuration

Source: https://github.com/reveal/revealjs.com/blob/master/src/creating-plugins.md

Shows how to include a custom plugin in the reveal.js initialization configuration array.

```javascript
import Reveal from 'reveal.js';
import Toaster from 'toaster.js';

Reveal.initialize({
  plugins: [Toaster],
});
```

--------------------------------

### React Component with Button Interaction

Source: https://github.com/reveal/revealjs.com/blob/master/src/_includes/demo.html

An enhanced React functional component that includes a button to increment a counter. This example demonstrates a common pattern for interactive UI elements within a presentation.

```javascript
import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

function SecondExample() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
```

--------------------------------

### Handling Ready State Events

Source: https://github.com/reveal/revealjs.com/blob/master/src/events.md

Shows how to detect when the presentation is fully loaded and ready for API calls using either an event listener or the Promise returned by the initialization method.

```javascript
Reveal.on('ready', (event) => {
  // event.currentSlide, event.indexh, event.indexv
});

Reveal.initialize().then(() => {
  // reveal.js is ready
});
```

--------------------------------

### Get Slide Information and State - JavaScript

Source: https://context7.com/reveal/revealjs.com/llms.txt

Retrieve information about current, previous, and all slides, including counts and DOM elements. Also includes functions to check various slide states like first, last, or vertical slides.

```javascript
const currentSlide = Reveal.getCurrentSlide();
const previousSlide = Reveal.getPreviousSlide();
const specificSlide = Reveal.getSlide(2, 1); // (horizontal, vertical)

const allSlides = Reveal.getSlides();
const horizontalSlides = Reveal.getHorizontalSlides();
const verticalSlides = Reveal.getVerticalSlides();

const totalSlides = Reveal.getTotalSlides();
const pastCount = Reveal.getSlidePastCount();

Reveal.isFirstSlide();
Reveal.isLastSlide();
Reveal.isVerticalSlide();
Reveal.hasHorizontalSlides();
Reveal.hasVerticalSlides();

const background = Reveal.getSlideBackground(0, 1);
const notes = Reveal.getSlideNotes(currentSlide);

const revealElement = Reveal.getRevealElement(); // <div class="reveal">
const slidesElement = Reveal.getSlidesElement(); // <div class="slides">
const viewportElement = Reveal.getViewportElement();
```

--------------------------------

### Reveal.configure()

Source: https://context7.com/reveal/revealjs.com/llms.txt

Update configuration options at runtime after the presentation has been initialized.

```APIDOC
## Reveal.configure()

### Description
Update configuration options at runtime after initialization.

### Method
`Reveal.configure(options)`

### Parameters
- **options** (object) - An object containing configuration options to update.

### Request Example
```javascript
// Start auto-sliding every 5 seconds
Reveal.configure({ autoSlide: 5000 });

// Change transition style
Reveal.configure({
  transition: 'zoom',
  transitionSpeed: 'fast'
});

// Enable/disable features
Reveal.configure({
  controls: false,
  progress: false
});
```

### Response
#### Success Response (200)
No direct response, configuration is updated internally.

### Example
```javascript
const config = Reveal.getConfig(); // Get current configuration
console.log(config.transition);
```
```

--------------------------------

### Reveal.js Navigation Buttons

Source: https://github.com/reveal/revealjs.com/blob/master/src/links.md

Provides examples of HTML elements that can be used as relative navigation links within Reveal.js. By adding classes like 'navigate-left', 'navigate-right', 'navigate-up', 'navigate-down', 'navigate-prev', and 'navigate-next', you can create custom directional controls.

```html
<button class="navigate-left">Left</button>
<button class="navigate-right">Right</button>
<button class="navigate-up">Up</button>
<button class="navigate-down">Down</button>

<!-- Previous vertical OR horizontal slide -->
<button class="navigate-prev">Prev</button>

<!-- Next vertical OR horizontal slide -->
<button class="navigate-next">Next</button>
```

--------------------------------

### Hiding Slides with data-visibility="hidden"

Source: https://github.com/reveal/revealjs.com/blob/master/src/slide-visibility.md

Demonstrates how to hide slides from view using the `data-visibility="hidden"` attribute. Hidden slides are removed from the DOM upon initialization. This example shows a basic HTML structure with a hidden slide.

```html
<section>Slide 1</section>
<section data-visibility="hidden">Slide 2</section>
<section>Slide 3</section>
```

--------------------------------

### Define Slide Notes using Markdown and data-markdown

Source: https://github.com/reveal/revealjs.com/blob/master/src/speaker-view.md

This example shows how to integrate speaker notes within a Markdown file used by reveal.js. By using the `data-markdown` attribute on the section and a specific separator (e.g., '^Note:'), notes can be written in Markdown and will only appear in the speaker view.

```html
<section data-markdown="example.md" data-separator="^\n\n\n"
         data-separator-vertical="^\n\n" data-separator-notes="^Note:">
# Title
## Sub-title

Here is some content...

Note:
This will only display in the notes window.
</section>
```

--------------------------------

### Configure KaTeX Plugin

Source: https://github.com/reveal/revealjs.com/blob/master/src/math.md

Provides the default configuration for the KaTeX plugin, including custom delimiters and tag ignoring, as well as how to set up a local path for offline use.

```javascript
Reveal.initialize({
  katex: {
    version: 'latest',
    delimiters: [
      { left: '$$', right: '$$', display: true },
      { left: '$', right: '$', display: false },
      { left: '\\(', right: '\\)', display: false },
      { left: '\\[', right: '\\]', display: true },
    ],
    ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
  },
  plugins: [RevealMath.KaTeX],
});

// Offline configuration example
Reveal.initialize({
  katex: {
    local: 'node_modules/katex',
  },
  plugins: [RevealMath.KaTeX],
});
```

--------------------------------

### Deprecated: Initialize Reveal.js with Dependencies

Source: https://github.com/reveal/revealjs.com/blob/master/src/plugins.md

This code snippet demonstrates the deprecated method of loading plugins using the `dependencies` array in reveal.js initialization. It shows how to conditionally load scripts.

```javascript
Reveal.initialize({
  dependencies: [
    { src: 'dist/plugin/markdown.js', condition: () => {
        return !!document.querySelector( ’[data-markdown]’ );
    } },
    { src: 'dist/plugin/highlight.js', async: true }
  ]
});
```

--------------------------------

### Configure MathJax 4 in Reveal.js

Source: https://github.com/reveal/revealjs.com/blob/master/src/math.md

This snippet demonstrates the default configuration for the MathJax 4 plugin in Reveal.js. It includes the CDN path for MathJax 4, settings for TeX inline math, and options to skip specific HTML tags. This setup is active by default when the plugin is used.

```javascript
Reveal.initialize({
  mathjax4: {
    mathjax: 'https://cdn.jsdelivr.net/npm/mathjax@4/tex-mml-chtml.js',
    tex: {
      inlineMath: [
        ['$', '$'],
        ['\\(', '\\)']
      ],
    },
    options: {
      skipHtmlTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code'],
    },
  },
  plugins: [RevealMath.MathJax4],
});
```

--------------------------------

### Markdown Plugin Initialization

Source: https://github.com/reveal/revealjs.com/blob/master/src/markdown.md

Shows how to manually include and initialize the Markdown plugin for Reveal.js presentations.

```APIDOC
## GET /api/users/{id}

### Description
Retrieves details for a specific user by their ID.

### Method
GET

### Endpoint
/api/users/{id}

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the user to retrieve.

### Response
#### Success Response (200)
- **id** (string) - The unique identifier for the user.
- **username** (string) - The username of the user.
- **email** (string) - The email address of the user.

#### Response Example
```json
{
  "id": "user-12345",
  "username": "johndoe",
  "email": "john.doe@example.com"
}
```
```

--------------------------------

### Marking Slides as Uncounted with data-visibility="uncounted"

Source: https://github.com/reveal/revealjs.com/blob/master/src/slide-visibility.md

Illustrates how to mark slides as 'uncounted' using `data-visibility="uncounted"`. This prevents these slides from affecting the internal slide numbering and progress bar, useful for optional slides at the end of a presentation. This example shows the HTML structure.

```html
<section>Slide 1</section>
<section>Slide 2</section>
<section data-visibility="uncounted">Slide 3</section>
```

--------------------------------

### Reveal.js Slide State Styling (HTML, CSS, JavaScript)

Source: https://github.com/reveal/revealjs.com/blob/master/src/markup.md

This example shows how to use the `data-state` attribute on a slide to trigger class changes on the viewport. This allows for dynamic styling of the presentation based on the currently active slide. It includes the HTML attribute, the corresponding CSS for styling, and a JavaScript event listener.

```html
<section data-state="make-it-pop"></section>
```

```css
/* CSS */
.make-it-pop {
  filter: drop-shadow(0 0 10px purple);
}
```

```javascript
Reveal.on('make-it-pop', () => {
  console.log('✨');
});
```

--------------------------------

### Animating List Item Changes with Reveal.js Auto-Animate

Source: https://github.com/reveal/revealjs.com/blob/master/src/auto-animate.md

This example showcases how Reveal.js automatically animates changes between lists on consecutive slides. By using the 'data-auto-animate' attribute on sections, new items are smoothly added and removed, creating a dynamic visual effect. No external libraries are required, and it works by comparing elements between auto-animated slides.

```html
<section data-auto-animate>
  <ul>
    <li>Mercury</li>
    <li>Jupiter</li>
    <li>Mars</li>
  </ul>
</section>
<section data-auto-animate>
  <ul>
    <li>Mercury</li>
    <li>Earth</li>
    <li>Jupiter</li>
    <li>Saturn</li>
    <li>Mars</li>
  </ul>
</section>
```

--------------------------------

### Import Reveal.js as an ES Module

Source: https://github.com/reveal/revealjs.com/blob/master/src/initialization.md

Explains how to use the reveal.mjs bundle to import the library as an ES module, including plugin registration.

```html
<script type="module">
  import Reveal from 'reveal.js';
  import Markdown from 'plugin/markdown';
  Reveal.initialize({
    plugins: [Markdown],
  });
</script>
```

```javascript
import Reveal from 'reveal.js';
Reveal.initialize();
```

--------------------------------

### Dynamically Add and Remove Keyboard Bindings

Source: https://github.com/reveal/revealjs.com/blob/master/src/keyboard.md

Shows how to use Reveal.addKeyBinding and Reveal.removeKeyBinding to programmatically manage shortcuts. This approach allows for adding descriptive metadata for the help overlay and runtime control.

```javascript
Reveal.addKeyBinding(binding, callback);
Reveal.removeKeyBinding(keyCode);

Reveal.addKeyBinding(
  { keyCode: 84, key: 'T', description: 'Start timer' },
  () => {
    // start timer
  }
);

Reveal.addKeyBinding(82, () => {
  // reset timer
});
```

--------------------------------

### Configure Autoplay for Media Elements

Source: https://github.com/reveal/revealjs.com/blob/master/src/media.md

Demonstrates how to enable autoplay for individual media elements using data attributes and how to configure global autoplay behavior via the Reveal.js initialization settings.

```html
<video
  data-autoplay
  src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"
></video>
```

```javascript
Reveal.initialize({
  autoPlayMedia: true,
});
```

--------------------------------

### Configure Reveal.js at Runtime - JavaScript

Source: https://context7.com/reveal/revealjs.com/llms.txt

Update configuration options for Reveal.js dynamically after initialization. This includes settings for auto-sliding, transitions, and enabling/disabling features like controls, progress, keyboard, and touch interactions. It also shows how to retrieve the current configuration.

```javascript
// Start auto-sliding every 5 seconds
Reveal.configure({ autoSlide: 5000 });

// Stop auto-sliding
Reveal.configure({ autoSlide: 0 });

// Change transition style
Reveal.configure({
  transition: 'zoom',
  transitionSpeed: 'fast'
});

// Enable/disable features
Reveal.configure({
  controls: false,
  progress: false,
  keyboard: false,
  touch: false
});

// Get current configuration
const config = Reveal.getConfig();
```

--------------------------------

### Configure Highlight.js via beforeHighlight

Source: https://github.com/reveal/revealjs.com/blob/master/src/code.md

Use the beforeHighlight callback in the reveal.js configuration to interact with the highlight.js instance before rendering. This is useful for registering custom languages.

```javascript
Reveal.initialize({
  highlight: {
    beforeHighlight: (hljs) => hljs.registerLanguage(/*...*/),
  },
  plugins: [RevealHighlight],
});
```

--------------------------------

### Configure Keyboard Bindings via Reveal.configure

Source: https://github.com/reveal/revealjs.com/blob/master/src/keyboard.md

Demonstrates how to override default keyboard shortcuts by passing a map of key codes to the keyboard configuration option. Actions can be defined as callback functions, API method strings, or null to disable a key.

```javascript
Reveal.configure({
  keyboard: {
    27: () => { console.log('esc') },
    13: 'next',
    32: null
  }
});
```

--------------------------------

### Image Lightbox with reveal.js

Source: https://github.com/reveal/revealjs.com/blob/master/src/lightbox.md

Demonstrates how to create an image lightbox by adding the `data-preview-image` attribute to an `img` tag. The lightbox can either display the image source directly or a specified alternative image source.

```html
<img src="reveal.png" data-preview-image>
<img src="reveal.png" data-preview-image="mastering.svg">
```

--------------------------------

### Video Lightbox with reveal.js

Source: https://github.com/reveal/revealjs.com/blob/master/src/lightbox.md

Shows how to implement video lightboxes using the `data-preview-video` attribute on either a `video` tag or an `img` tag. This allows videos to be played in a full-screen overlay.

```html
<video src="video.mp4" data-preview-video></video>
<img src="reveal.png" data-preview-video="video.mp4">
```

--------------------------------

### Initialize Multiple Embedded Presentations

Source: https://github.com/reveal/revealjs.com/blob/master/src/initialization.md

Shows how to create multiple independent reveal.js instances on a single page by instantiating the Reveal class and setting the embedded configuration.

```html
<div class="reveal deck1">...</div>
<div class="reveal deck2">...</div>

<script type="module">
  import Reveal from 'reveal.js';

  let deck1 = new Reveal(document.querySelector('.deck1'), {
    embedded: true,
    keyboardCondition: 'focused',
  });
  deck1.initialize();

  let deck2 = new Reveal(document.querySelector('.deck2'), {
    embedded: true,
  });
  deck2.initialize();
</script>
```

--------------------------------

### Reconfiguring Reveal.js Options

Source: https://github.com/reveal/revealjs.com/blob/master/src/config.md

Demonstrates how to update Reveal.js configuration options after the presentation has been initialized using the `configure` method. This allows for dynamic changes to presentation behavior, such as disabling or enabling auto-sliding.

```javascript
// Turn autoSlide off
Reveal.configure({ autoSlide: 0 });

// Start auto-sliding every 5s
Reveal.configure({ autoSlide: 5000 });

```

--------------------------------

### Configuring Markdown Rendering Options

Source: https://github.com/reveal/revealjs.com/blob/master/src/react.md

Illustrates how to pass rendering options to the Markdown component via the `options` prop. This includes enabling automatic fragment creation for list items and enabling smart typography.

```tsx
<Markdown options={{ animateLists: true, smartypants: true }}>
  {`
    ## My Slide

    - First item
    - Second item
    - Third item
  `}
</Markdown>
```

--------------------------------

### Lightbox Configuration Attributes

Source: https://github.com/reveal/revealjs.com/blob/master/src/zh-Hant/lightbox.md

Documentation on how to trigger lightboxes and control media display behavior using HTML attributes.

```APIDOC
## HTML Attributes for Lightbox

### Description
Configure lightbox behavior by adding specific data attributes to HTML elements like img, video, a, or button tags.

### Attributes
- **data-preview-image** (string) - Optional - Path to the image to display. If empty, uses the element's src.
- **data-preview-video** (string) - Optional - Path to the video to display. If empty, uses the element's src.
- **data-preview-link** (boolean) - Optional - Enables iframe preview for anchor tags using the href attribute.
- **data-preview-fit** (string) - Optional - Controls media sizing. Options: 'scale-down' (default), 'contain', 'cover'.

### Usage Example
```html
<!-- Image Lightbox -->
<img src="thumb.png" data-preview-image="large.png" data-preview-fit="cover">

<!-- Video Lightbox -->
<video src="video.mp4" data-preview-video></video>

<!-- Iframe Link Lightbox -->
<a href="https://example.com" data-preview-link>Open Site</a>
```
```

--------------------------------

### Presentation Utility and State Methods

Source: https://github.com/reveal/revealjs.com/blob/master/src/api.md

Utility methods for syncing the presentation, retrieving configuration, calculating scales, and accessing slide attributes or notes.

```javascript
Reveal.sync();
Reveal.syncSlide();
Reveal.syncFragments();
Reveal.layout();
Reveal.shuffle();
Reveal.getConfig();
Reveal.getScale();
Reveal.getComputedSlideSize();
Reveal.getIndices();
Reveal.getProgress();
Reveal.getSlidesAttributes();
Reveal.getSlideBackground(indexh, indexv);
Reveal.getSlideNotes();
Reveal.getQueryHash();
Reveal.getSlidePath();
```

--------------------------------

### Initialize Speaker Notes Plugin

Source: https://github.com/reveal/revealjs.com/blob/master/src/speaker-view.md

How to include and initialize the RevealNotes plugin in your reveal.js presentation.

```APIDOC
## Initialization

### Description
Enables the speaker notes functionality by adding the plugin script and registering it in the Reveal configuration.

### Request Example
<script src="dist/plugin/notes.js"></script>
<script>
  Reveal.initialize({
    plugins: [RevealNotes],
  });
</script>
```

--------------------------------

### Initialize reveal.js as an ES Module

Source: https://github.com/reveal/revealjs.com/blob/master/src/installation.md

Code to import and initialize reveal.js with plugins and required CSS styles in a JavaScript project.

```javascript
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown';

let deck = new Reveal({
  plugins: [Markdown],
});
deck.initialize();

import 'reveal.js/reveal.css';
import 'reveal.js/theme/black.css';
```

--------------------------------

### Generate Production Build

Source: https://github.com/reveal/revealjs.com/blob/master/README.md

Generates the production-ready build of the website. This command is used to create the optimized files for deployment.

```sh
yarn run production
```