### Reveal.initialize Configuration

Source: https://github.com/hakimel/reveal.js/blob/master/examples/layout-helpers.html

Example of initializing reveal.js with plugins and configuration options.

```APIDOC
## Reveal.initialize Configuration

### Description
This snippet shows a typical configuration for initializing reveal.js, including options for centering slides, enabling hash navigation, and loading plugins like RevealHighlight.

### Code

```javascript
Reveal.initialize({
  center: true,
  hash: true,
  plugins: [RevealHighlight]
});
```
```

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

### Install @revealjs/react and Dependencies

Source: https://github.com/hakimel/reveal.js/blob/master/react/README.md

Installs the @revealjs/react package along with reveal.js, react, and react-dom. This command is essential for setting up a Reveal.js presentation using React.

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

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

### Basic Reveal.js Deck Setup with React

Source: https://github.com/hakimel/reveal.js/blob/master/react/README.md

Demonstrates how to render a basic Reveal.js deck using the Deck and Slide components from @revealjs/react. It includes importing core Reveal.js CSS and a theme.

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

export function Presentation() {
  return (
    <Deck>
      <Slide>
        <h1>Hello</h1>
        <p>My first Reveal deck in React.</p>
      </Slide>

      <Slide background="#111827">
        <h2>Second slide</h2>
      </Slide>
    </Deck>
  );
}
```

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

### Configure Reveal.js Initialization

Source: https://github.com/hakimel/reveal.js/blob/master/examples/lightbox.html

Initializes Reveal.js with specific configuration options. This example disables the preview of links, sets the presentation width to 1280 pixels, and the height to 720 pixels.

```javascript
Reveal.initialize({
  previewLinks: false,
  width: 1280,
  height: 720
});
```

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

### Lightbox Image and Video Example

Source: https://github.com/hakimel/reveal.js/blob/master/demo.html

Demonstrates how to implement lightbox functionality for images and videos in reveal.js. By adding `data-preview-image` or `data-preview-video` attributes to an element, it can be turned into a clickable lightbox.

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

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

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

### Basic Auto Animate Example (React)

Source: https://github.com/hakimel/reveal.js/blob/master/examples/auto-animate.html

Demonstrates a simple Auto Animate setup within a React component. This example shows how Auto Animate can be applied to elements that change between slides, creating a fading effect.

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

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

### Configure Reveal.js Initialization

Source: https://github.com/hakimel/reveal.js/blob/master/examples/backgrounds.html

Initializes Reveal.js with various configuration options, including centering content, transition effects, and background transitions. This snippet demonstrates the basic setup for Reveal.js.

```javascript
Reveal.initialize({
  center: true,
  transition: 'linear',
  // transitionSpeed: 'slow',
  // backgroundTransition: 'slide'
});
```

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

### Reveal.js Auto-Animate Testing Setup (JavaScript)

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-auto-animate.html

This JavaScript code sets up the testing environment for reveal.js's auto-animate feature using QUnit. It imports necessary CSS and libraries, initializes reveal.js, and defines test cases to verify auto-animation behavior.

```javascript
import 'reveal.css';
import 'qunit/qunit/qunit.css';
import QUnit from 'qunit';
import Reveal from 'reveal.js';

QUnit.config.testTimeout = 30000;
QUnit.config.reorder = false;
QUnit.config.autostart = false;

const slides = Array.prototype.map.call( document.querySelectorAll( '.slides section' ), slide => {
  return {
    slide: slide,
    h1: slide.querySelector( 'h1' ),
    h2: slide.querySelector( 'h2' ),
    h3: slide.querySelector( 'h3' )
  };
} );

QUnit.module( 'Auto-Animate' );

Reveal.initialize().then( () => {
  QUnit.start();

  QUnit.test( 'Adds data-auto-animate-target', assert => {
    Reveal.slide(1);
    assert.strictEqual( slides[0].h1.getAttribute( 'data-auto-animate-target' ), '', 'From elements have blank data-auto-animate-target' );
    assert.ok( slides[1].h1.getAttribute( 'data-auto-animate-target' ).length > 0, 'To elements have a data-auto-animate-target value' );
  });

  QUnit.test( 'Ends on correct target styles', assert => {
    Reveal.slide(1);
    assert.strictEqual( slides[1].h2.style.opacity, "0" );
    assert.strictEqual( slides[1].h3.offsetLeft, 100 );
  });

  QUnit.test( 'Does not add [data-auto-animate] on non auto-animated slides', assert => {
    Reveal.slide(2);
    Reveal.next();
    assert.ok( slides[3].slide.hasAttribute( 'data-auto-animate' ) === false )
  });

  QUnit.test( 'autoAnimate config option', assert => {
    Reveal.configure({ autoAnimate: false });
    assert.ok( document.querySelectorAll( 'data-auto-animate-target' ).length === 0, 'Removes all [data-auto-animate-target]' )
    assert.ok( Array.prototype.every.call( document.querySelectorAll( 'section[data-auto-animate]' ), el => {
      return el.dataset.autoAnimate === '';
    }, 'All data-auto-animate attributes are reset' ) );
    Reveal.configure({ autoAnimate: true });
  });

  QUnit.test( 'Slide specific data-auto-animate-duration', assert => {
    assert.timeout( 2000 );
    assert.expect( 1 );
    return new Promise( resolve => {
      let callback = () => {
        slides[2].h3.removeEventListener( 'transitionend', callback );
        assert.ok( true, 'Transition ended within time window' );
        resolve();
      }
      Reveal.slide(1);
      Reveal.slide(2);
      slides[2].h3.addEventListener( 'transitionend', callback );
    } );
  });

  // QUnit.test( 'Element specific data-auto-animate-duration', assert => {
  //   assert.timeout( 400 );
  //   assert.expect( 1 );
  //   return new Promise( resolve => {
  //     let callback = () => {
  //       slides[1].h1.removeEventListener( 'transitionend', callback );
  //       assert.ok( true, 'Transition ended within time window' );
  //       resolve()
  //     }
  //     Reveal.slide(1);
  //     slides[1].h1.addEventListener( 'transitionend', callback );
  //   } );
  // });
} );
```

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

### React Component Example

Source: https://github.com/hakimel/reveal.js/blob/master/demo.html

A basic React component demonstrating the use of the useState hook for managing component state. This example is suitable for use within reveal.js presentations to showcase interactive elements.

```javascript
import { 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>
  );
}
```

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

### Setup Speaker Notes Iframes

Source: https://github.com/hakimel/reveal.js/blob/master/plugin/notes/speaker-view.html

Creates and appends iframes for the current and upcoming slides to the DOM. It configures the iframe URLs with specific parameters for transition, auto-slide, and post-message event support.

```javascript
function setupIframes( data ) { var params = [ 'receiver', 'progress=false', 'history=false', 'transition=none', 'autoSlide=0', 'backgroundTransition=none' ].join( '&' ); var urlSeparator = /\?/.test(data.url) ? '&' : '?'; var hash = '#/' + data.state.indexh + '/' + data.state.indexv; var currentURL = data.url + urlSeparator + params + '&scrollActivationWidth=false&postMessageEvents=true' + hash; var upcomingURL = data.url + urlSeparator + params + '&scrollActivationWidth=false&controls=false' + hash; currentSlide = document.createElement( 'iframe' ); currentSlide.setAttribute( 'width', 1280 ); currentSlide.setAttribute( 'height', 1024 ); currentSlide.setAttribute( 'src', currentURL ); document.querySelector( '#current-slide' ).appendChild( currentSlide ); upcomingSlide = document.createElement( 'iframe' ); upcomingSlide.setAttribute( 'width', 640 ); upcomingSlide.setAttribute( 'height', 512 ); upcomingSlide.setAttribute( 'src', upcomingURL ); document.querySelector( '#upcoming-slide' ).appendChild( upcomingSlide ); }
```

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

### Gradient Background Example

Source: https://github.com/hakimel/reveal.js/blob/master/demo.html

Example of setting a gradient background for a reveal.js slide. The `data-background-gradient` attribute accepts CSS gradient values, allowing for visually appealing slide backgrounds.

```html
<section data-background-gradient="linear-gradient(to bottom, #ddd, #191919)">
</section>
```

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

### Markdown Slide Example

Source: https://github.com/hakimel/reveal.js/blob/master/demo.html

Example of how to use Markdown within reveal.js slides. This allows for content creation using Markdown syntax, which is then rendered as slides. The `data-markdown` attribute on the section tag enables this feature.

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

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

### React Component Example for Scroll View

Source: https://github.com/hakimel/reveal.js/blob/master/examples/scroll.html

A basic React component demonstrating state management with useState. This example can be integrated into reveal.js presentations to create interactive elements that respond to user actions, potentially in conjunction with scroll events.

```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>
  );
}
```

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

### Reveal.js Initialization for Scroll View

Source: https://github.com/hakimel/reveal.js/blob/master/examples/scroll.html

Configuration for initializing reveal.js with the scroll view mode enabled. This setup includes essential plugins for markdown support, code highlighting, and speaker notes, along with enabling hash navigation for deep linking.

```javascript
Reveal.initialize({ view: 'scroll', hash: true, plugins: [RevealMarkdown, RevealHighlight, RevealNotes] });
```

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

### Markdown Fragments and Element Attributes

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-markdown.html

This example demonstrates the use of Markdown for creating fragments within slides, controlling their appearance and behavior using 'fragment' classes and 'data-fragment-index'. It also shows how to apply classes and attributes to specific elements within a slide using the '.element:' syntax.

```markdown
# Test attributes in Markdown

## Slide 1.1 <!-- {\_class="fragment fade-out" data-fragment-index="1"} --> -- ## Slide 1.2 <!-- {\_class="fragment shrink"} -->
Paragraph 1 <!-- {\_class="fragment grow"} -->
Paragraph 2 <!-- {\_class="fragment grow"} -->
- list item 1 <!-- {\_class="fragment grow"} -->
- list item 2 <!-- {\_class="fragment grow"} -->
- list item 3 <!-- {\_class="fragment grow"} -->
---
## Slide 2
Paragraph 1.2 multi-line <!-- {\_class="fragment highlight-red"} -->
Paragraph 2.2 <!-- {\_class="fragment highlight-red"} -->
Paragraph 2.3 <!-- {\_class="fragment highlight-red"} -->
Paragraph 2.4 <!-- {\_class="fragment highlight-red"} -->
- list item 1 <!-- {\_class="fragment highlight-green"} -->
- list item 2<!-- {\_class="fragment highlight-green"} -->
- list item 3<!-- {\_class="fragment highlight-green"} -->
- list item 4 <!-- {\_class="fragment highlight-green"} -->
- list item 5<!-- {\_class="fragment highlight-green"} -->
Test ![Example Picture](examples/assets/image2.png) <!-- {\_class="reveal stretch"} -->

# Test attributes in Markdown with default separator
## Slide 1 Def <!-- .element: class="fragment highlight-red" data-fragment-index="1" -->
## Slide 2 Def <!-- .element: class="fragment highlight-red" -->

## Hello world A paragraph <!-- .element: class="fragment highlight-blue" -->

## Hello world Multiple Line <!-- .element: class="fragment highlight-blue" -->

## Hello world Test<!-- .element: class="fragment highlight-blue" --> More Test
```

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

### Initialize Reveal.js Decks with Markdown Plugin

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-markdown.html

Demonstrates initializing multiple Reveal.js instances with the Markdown plugin. Each deck is configured and attached to a specific DOM element. Event listeners are set up for the 'ready' event to run QUnit tests.

```javascript
import 'reveal.css';
import 'qunit/qunit/qunit.css';
import QUnit from 'qunit';
import Reveal from 'reveal.js';
import Markdown from 'reveal.js/plugin/markdown'
import Highlight from 'reveal.js/plugin/highlight'

QUnit.config.testTimeout = 30000;

let deck1 = new Reveal( document.querySelector( '.deck1' ), {
  plugins: [ Markdown ]
})

deck1.addEventListener( 'ready', function() {
  QUnit.module( 'Inline' );
  QUnit.test( 'Vertical separator', function( assert ) {
    assert.strictEqual( deck1.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
  });
  QUnit.test( 'Horizontal separator', function( assert ) {
    assert.strictEqual( deck1.getRevealElement().querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
  });
} );

let deck2 = new Reveal( document.querySelector( '.deck2' ), {
  plugins: [ Markdown ]
})
deck2.addEventListener( 'ready', function() {
  QUnit.module( 'External' );
  QUnit.test( 'Vertical separator', function( assert ) {
    assert.strictEqual( deck2.getRevealElement().querySelectorAll( '.reveal .slides>section>section' ).length, 2, 'found two slides' );
  });
  QUnit.test( 'Horizontal separator', function( assert ) {
    assert.strictEqual( deck2.getRevealElement().querySelectorAll( '.reveal .slides>section' ).length, 2, 'found two slides' );
  });
} );

let deck3 = new Reveal( document.querySelector( '.deck3' ), {
  plugins: [ Markdown ]
})
deck3.addEventListener( 'ready', function() {
  QUnit.module( 'Slide Attributes' );
  QUnit.test( 'Id on slide', function( assert ) {
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section#slide2' ).length, 1, 'found one slide with id slide2' );
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section a[href="#/slide2"]' ).length, 1, 'found one slide with a link to slide2' );
  });
  QUnit.test( 'data-background attributes', function( assert ) {
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#A0C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#ff0000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#C6916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
  });
  QUnit.test( 'data-transition attributes', function( assert ) {
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="zoom"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="fade"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides section [data-transition="zoom"]' ).length, 1, 'found one slide with data-transition="zoom"' );
  });
  QUnit.test( 'data-background attributes with default separator', function( assert ) {
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#A7C66B"]' ).length, 1, 'found one vertical slide with data-background="#A0C66B"' );
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-background="#f70000"]' ).length, 1, 'found one vertical slide with data-background="#ff0000"' );
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#C7916B"]' ).length, 1, 'found one slide with data-background="#C6916B"' );
  });
  QUnit.test( 'data-transition attributes with default separator', function( assert ) {
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="concave"]' ).length, 1, 'found one vertical slide with data-transition="zoom"' );
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section>section[data-transition="page"]' ).length, 1, 'found one vertical slide with data-transition="fade"' );
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides section [data-transition="concave"]' ).length, 1, 'found one slide with data-transition="zoom"' );
  });
  QUnit.test( 'data-transition attributes with inline content', function( assert ) {
    assert.strictEqual( deck3.getRevealElement().querySelectorAll( '.reveal .slides>section[data-background="#ff0000"]' ).length, 3, 'found three horizontal slides with data-background="#ff0000"' );
  });
} );

let deck4 = new Reveal( document.querySelector( '.deck4' ), {
  markdown: {
    smartypants: true
  },
  plugins: [ Markdown ]
})
deck4.addEventListener( 'ready', function() {
  QUnit.module( 'Options' );
  QUnit.test( 'Opt' );
});
```

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

### Reveal.js Initialization and Configuration

Source: https://github.com/hakimel/reveal.js/blob/master/test/test.html

Initializes reveal.js with custom configuration and sets up the test environment. It imports necessary CSS and the QUnit testing framework. The configuration includes setting the maximum scale for slides.

```javascript
import 'reveal.css';
import 'qunit/qunit/qunit.css';
import QUnit from 'qunit';
import Reveal from 'reveal.js';

QUnit.config.testTimeout = 30000;

window.location.hash = '';

Reveal.configure({
    maxScale: 1.11
});

// These tests expect the DOM to contain a presentation
// with the following slide structure:
//
// 1
// 2 - Three sub-slides
// 3 - Three fragment elements
// 3 - Two fragments with same data-fragment-index
// 4

Reveal.initialize().then( function() {
    // Helper methods
    function triggerKeyboardEvent(config) {
        document.dispatchEvent( new KeyboardEvent( 'keydown', config ) );
    }

    // ---------------------------------------------------------------
    // DOM TESTS
    QUnit.module( 'DOM' );

    QUnit.test( 'Initial slides classes', function( assert ) {
        var horizontalSlides = document.querySelectorAll( '.reveal .slides>section' )
        assert.strictEqual( document.querySelectorAll( '.reveal .slides section[data-visibility="hidden"]' ).length, 0, 'no data-visibility="hidden" slides' );
        assert.strictEqual( document.querySelectorAll( '.reveal .slides section.past' ).length, 0, 'no .past slides' );
        assert.strictEqual( document.querySelectorAll( '.reveal .slides section.present' ).length, 1, 'one .present slide' );
        assert.strictEqual( document.querySelectorAll( '.reveal .slides section.future' ).length, horizontalSlides.length - 1, 'remaining horizontal slides are .future' );
        assert.strictEqual( document.querySelectorAll( '.reveal .slides section.stack' ).length, 2, 'two .stacks' );
        assert.ok( document.querySelectorAll( '.reveal .slides section.stack' )[0].querySelectorAll( '.future' ).length > 0, 'vertical slides are given .future' );
    });

    // ---------------------------------------------------------------
    // API TESTS
    QUnit.module( 'API' );

    QUnit.test( 'Reveal.configure before initialization', function( assert ) {
        assert.strictEqual( Reveal.getConfig().maxScale, 1.11 );
    });

    QUnit.test( 'Reveal.isReady', function( assert ) {
        assert.strictEqual( Reveal.isReady(), true, 'returns true' );
    });

    QUnit.test( 'Reveal.isOverview', function( assert ) {
        assert.strictEqual( Reveal.isOverview(), false, 'false by default' );
        Reveal.toggleOverview();
        assert.strictEqual( Reveal.isOverview(), true, 'true after toggling on' );
        Reveal.toggleOverview();
        assert.strictEqual( Reveal.isOverview(), false, 'false after toggling off' );
    });

    QUnit.test( 'Reveal.isPaused', function( assert ) {
        assert.strictEqual( Reveal.isPaused(), false, 'false by default' );
        Reveal.togglePause();
        assert.strictEqual( Reveal.isPaused(), true, 'true after pausing' );
        Reveal.togglePause();
        assert.strictEqual( Reveal.isPaused(), false, 'false after resuming' );
    });

    QUnit.test( 'Reveal.isFirstSlide', function( assert ) {
        Reveal.slide( 0, 0 );
        assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
        Reveal.slide( 1, 0 );
        assert.strictEqual( Reveal.isFirstSlide(), false, 'false after Reveal.slide( 1, 0 )' );
        Reveal.slide( 0, 0 );
        assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 0, 0 )' );
    });

    QUnit.test( 'Reveal.isFirstSlide after vertical slide', function( assert ) {
        Reveal.slide( 1, 1 );
        Reveal.slide( 0, 0 );
        assert.strictEqual( Reveal.isFirstSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( 0, 0 )' );
    });

    QUnit.test( 'Reveal.isLastSlide', function( assert ) {
        Reveal.slide( 0, 0 );
        assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
        var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
        Reveal.slide( lastSlideIndex, 0 );
        assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( '+ lastSlideIndex +', 0 )' );
        Reveal.slide( 0, 0 );
        assert.strictEqual( Reveal.isLastSlide(), false, 'false after Reveal.slide( 0, 0 )' );
    });

    QUnit.test( 'Reveal.isLastSlide after vertical slide', function( assert ) {
        var lastSlideIndex = document.querySelectorAll( '.reveal .slides>section' ).length - 1;
        Reveal.slide( 1, 1 );
        Reveal.slide( lastSlideIndex );
        assert.strictEqual( Reveal.isLastSlide(), true, 'true after Reveal.slide( 1, 1 ) and then Reveal.slide( '+ lastSlideIndex +', 0 )' );
    });

    QUnit.test( 'Reveal.getTotalSlides', function( assert ) {
        assert.strictEqual( Reveal.getTotalSlides(), 8, 'eight slides in total' );
    });

    QUnit.test( 'Reveal.getIndices', function( assert ) {
        var indices = Reveal.getIndices();
        assert.ok( indices.hasOwnProperty( 'h' ), 'h exists' );
        assert.ok( indices.hasOwnProperty( 'v' ), 'v exists' );
        assert.ok( indices.hasOwnProperty( 'f' ), 'f exists' );

        Reveal.slide( 1, 0 );
        assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
        assert.strictEqual( Reveal.getIndices().v, 0, 'v 0' );

        Reveal.slide( 1, 2 );
        assert.strictEqual( Reveal.getIndices().h, 1, 'h 1' );
        assert.strictEqual( Reveal.getIndices().v, 2, 'v 2' );
    });

});
```

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

### Initialize Reveal.js with Plugins

Source: https://github.com/hakimel/reveal.js/blob/master/index.html

This snippet shows how to initialize reveal.js with common configurations and plugins. It enables hash-based navigation for slides and includes plugins for Markdown support, code highlighting, and speaker notes. Ensure these plugins are correctly imported before initialization.

```javascript
Reveal.initialize({
  hash: true,
  plugins: [RevealMarkdown, RevealHighlight, RevealNotes],
});
```

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

### Initialize and Test Multiple reveal.js Instances

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-multiple-instances-es5.html

Demonstrates how to instantiate two separate reveal.js decks with different configurations and plugins. It includes QUnit test cases to verify that slide navigation, overview toggling, and plugin registration are independent for each instance.

```javascript
import 'reveal.css';
import 'qunit/qunit/qunit.css';
import QUnit from 'qunit';
import Reveal from 'reveal.js';
import RevealZoom from 'reveal.js/plugin/zoom';

QUnit.config.testTimeout = 30000;
QUnit.module( 'Multiple reveal.js instances' );

let r1 = new Reveal( document.querySelector( '.deck1 .reveal' ), { embedded: true, keyboard: true, plugins: [RevealZoom()] } );
r1.initialize();

let r2 = new Reveal( document.querySelector( '.deck2 .reveal' ), { embedded: true, keyboard: false } );
r2.initialize();

QUnit.test( 'Can make independent changes', function( assert ) {
  r1.slide(1);
  r2.slide(2);
  assert.strictEqual( r1.getCurrentSlide().textContent, '1.2' );
  assert.strictEqual( r2.getCurrentSlide().textContent, '2.3' );
  r2.toggleOverview( true );
  assert.strictEqual( r1.isOverview(), false );
  assert.strictEqual( r2.isOverview(), true );
  r2.toggleOverview( false );
  assert.strictEqual( r1.getConfig().keyboard, true );
  assert.strictEqual( r2.getConfig().keyboard, false );
});

QUnit.test( 'Can register plugins independently', function( assert ) {
  assert.ok( r1.hasPlugin( 'zoom' ) );
  assert.notOk( r2.hasPlugin( 'zoom' ) );
});
```

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

### JavaScript: Test line offset with specific start line

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-markdown.html

This JavaScript snippet verifies reveal.js's ability to set a line offset for code blocks, specifically when no line highlights are explicitly defined but a starting line number is provided. It checks for the presence of the correct DOM element.

```javascript
QUnit.test( '`javascript [756:] add line offset and sets no line highlights and sets language', function( assert ) { assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-offset-and-lanugage .hljs.javascript[data-ln-start-from="756"]' ).length, 1 ); });
```

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

### Reveal.js Initialization Configuration

Source: https://github.com/hakimel/reveal.js/blob/master/examples/auto-animate.html

Shows the basic initialization code for reveal.js, including essential options like `center`, `hash`, and the `RevealHighlight` plugin. This configuration sets up the presentation environment.

```javascript
Reveal.initialize({ center: true, hash: true, plugins: [RevealHighlight], });
```

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

### Initialize and Register Plugins in reveal.js

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-plugins.html

This snippet demonstrates how to initialize reveal.js with plugins and register additional plugins programmatically. It covers synchronous registration and initialization of plugins.

```javascript
import 'reveal.css';
import 'qunit/qunit/qunit.css';
import QUnit from 'qunit';
import Reveal from 'reveal.js';

QUnit.config.testTimeout = 30000;

QUnit.module( 'Plugins' );

var initCounter = {
	PluginB: 0,
	PluginC: 0,
	PluginD: 0
};

// Plugin with no init method
var PluginA = {
	id: 'PluginA'
};

// Plugin with init method
var PluginB = {
	id: 'PluginB',
	init: function() {
		initCounter['PluginB'] += 1;
	}
};

// Async plugin with init method
var PluginC = {
	id: 'PluginC',
	init: function() {
		return new Promise( function( resolve ) {
			setTimeout( () => {
				initCounter['PluginC'] += 1;
				resolve();
			}, 1000 );
		});
	}
};

// Plugin initialized after reveal.js is ready
var PluginD = {
	id: 'PluginD',
	init: function() {
		initCounter['PluginD'] += 1;
	}
};

var PluginE = {
	id: 'PluginE'
};

var reveal = new Reveal( document.querySelector( '.reveal' ), {
	plugins: [ PluginA ]
} );

reveal.registerPlugin( PluginB );
reveal.registerPlugin( PluginC );
reveal.initialize();
```

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

### Configure Reveal.js with Plugins

Source: https://github.com/hakimel/reveal.js/blob/master/demo.html

Initializes reveal.js with specified controls, progress, centering, and hash navigation. It also loads several plugins for enhanced functionality, such as zoom, notes, search, markdown, and highlight.

```javascript
import Reveal from 'reveal.js';
import RevealZoom from 'reveal.js/plugin/zoom';
import RevealNotes from 'reveal.js/plugin/notes';
import RevealSearch from 'reveal.js/plugin/search';
import RevealMarkdown from 'reveal.js/plugin/markdown';
import RevealHighlight from 'reveal.js/plugin/highlight';

Reveal.initialize({
  controls: true,
  progress: true,
  center: true,
  hash: true,
  // Learn about plugins: https://revealjs.com/plugins/
  plugins: [RevealZoom, RevealNotes, RevealSearch, RevealMarkdown, RevealHighlight]
});
```

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

### Plugin Initialization and Registration

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-plugins.html

Tests for synchronous and asynchronous plugin initialization, as well as duplicate registration prevention.

```APIDOC
## POST /reveal.js/plugins

### Description
Tests the initialization and registration of reveal.js plugins. This includes verifying synchronous and asynchronous initialization, handling of duplicate registrations, and the ability to register plugins after reveal.js has become ready.

### Method
POST

### Endpoint
/reveal.js/plugins

### Parameters
#### Request Body
- **plugins** (array) - Required - An array of plugin objects to be registered and tested.
  - **id** (string) - Required - A unique identifier for the plugin.
  - **init** (function) - Optional - A function to initialize the plugin. Can be synchronous or return a Promise for asynchronous initialization.

### Request Example
```json
{
  "plugins": [
    {
      "id": "PluginA"
    },
    {
      "id": "PluginB",
      "init": "function() { /* synchronous init logic */ }"
    },
    {
      "id": "PluginC",
      "init": "function() { return new Promise(function(resolve) { setTimeout(() => { resolve(); }, 1000); }); }"
    }
  ]
}
```

### Response
#### Success Response (200)
- **message** (string) - A confirmation message indicating successful plugin testing.
- **results** (object) - An object containing the results of the plugin tests.
  - **synchronousInit** (boolean) - Indicates if synchronous plugins initialized correctly.
  - **asynchronousInit** (boolean) - Indicates if asynchronous plugins initialized correctly.
  - **duplicateRegistration** (boolean) - Indicates if duplicate plugin registrations were handled properly.
  - **postReadyRegistration** (boolean) - Indicates if plugins registered after reveal.js was ready initialized correctly.

#### Response Example
```json
{
  "message": "Plugin tests completed successfully.",
  "results": {
    "synchronousInit": true,
    "asynchronousInit": true,
    "duplicateRegistration": true,
    "postReadyRegistration": true
  }
}
```
```

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

### Code Block with Array Syntax

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-markdown.html

This example shows a code block where the language identifier is an empty array `[]`. Reveal.js will attempt to render this, though specific highlighting might depend on the configured highlighter.

```plaintext
```[] code ```
```

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

### Access Reveal.js API with deckRef

Source: https://github.com/hakimel/reveal.js/blob/master/react/README.md

This example shows how to obtain a reference to the Reveal.js API instance outside of the component tree by passing a `deckRef` to the `Deck` component. It utilizes the `useRef` hook from React and requires the `RevealApi` type from `reveal.js`.

```tsx
import { useRef } from 'react';
import { Deck, Slide } from '@revealjs/react';
import type { RevealApi } from 'reveal.js';

export function Presentation() {
  const deckRef = useRef<RevealApi | null>(null);

  return (
    <Deck deckRef={deckRef}>
      <Slide>Hello</Slide>
    </Deck>
  );
}
```

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

### Reveal.previewIframe and State Management

Source: https://github.com/hakimel/reveal.js/blob/master/test/test.html

Demonstrates how to preview an iframe, manage the presentation state including the preview iframe URL, and toggle overlay visibility. It verifies that the state is correctly stored and restored.

```javascript
Reveal.previewIframe( previewURL );
var state = Reveal.getState();
assert.strictEqual( state.previewIframe, previewURL, 'state includes preview iframe URL' );
assert.strictEqual( Reveal.isOverlayOpen(), true, 'overlay is open' );
Reveal.hidePreview();
assert.strictEqual( Reveal.isOverlayOpen(), false, 'overlay closed' );
Reveal.setState( state );
assert.strictEqual( Reveal.isOverlayOpen(), true, 'setState restores overlay' );
assert.strictEqual( Reveal.getState().previewIframe, previewURL, 'restored overlay state has same URL' );
Reveal.hidePreview();
```

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

### Initialize Multiple Reveal.js Instances with Plugins

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-multiple-instances.html

This code initializes two independent instances of reveal.js. It demonstrates how to configure different settings and include plugins like 'Zoom' for one instance while keeping the other simpler. The tests verify their independent slide control, overview toggling, and keyboard configuration.

```javascript
import 'reveal.css';
import 'qunit/qunit/qunit.css';
import QUnit from 'qunit';
import Reveal from 'reveal.js';
import Zoom from 'reveal.js/plugin/zoom';

QUnit.config.testTimeout = 30000;

QUnit.module( 'Multiple reveal.js instances' );

let r1 = new Reveal( document.querySelector( '.deck1 .reveal' ), {
    embedded: true,
    keyboard: true,
    plugins: [ Zoom ]
} );
r1.initialize();

let r2 = new Reveal( document.querySelector( '.deck2 .reveal' ), {
    embedded: true,
    keyboard: false
} );
r2.initialize();

QUnit.test( 'Can make independent changes', function( assert ) {
    r1.slide(1);
    r2.slide(2);
    assert.strictEqual( r1.getCurrentSlide().textContent, '1.2' );
    assert.strictEqual( r2.getCurrentSlide().textContent, '2.3' );

    r2.toggleOverview( true );
    assert.strictEqual( r1.isOverview(), false );
    assert.strictEqual( r2.isOverview(), true );
    r2.toggleOverview( false );

    assert.strictEqual( r1.getConfig().keyboard, true );
    assert.strictEqual( r2.getConfig().keyboard, false );
});

QUnit.test( 'Can register plugins independently', function( assert ) {
    assert.ok( r1.hasPlugin( 'zoom' ) );
    assert.notOk( r2.hasPlugin( 'zoom' ) );
});

QUnit.test( 'Slide state is set at the viewport level', function( assert ) {
    r1.slide(1);
    assert.ok( r1.getViewportElement().classList.contains( r1.getCurrentSlide().getAttribute( 'data-state' ) ) );
    r1.slide(2);
    assert.ok( !r1.getViewportElement().classList.contains( r1.getCurrentSlide().getAttribute( 'data-state' ) ), 'unset' );
});

QUnit.test( 'Reveal does not leak to window', function( assert ) {
    assert.strictEqual( window.Reveal, undefined );
});
```

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

### JavaScript Reveal.initialize with Plugins

Source: https://github.com/hakimel/reveal.js/blob/master/examples/markdown.html

Initializes reveal.js with various options enabled, including controls, progress, history, and centering. It also configures the Markdown plugin with smartypants and loads several essential reveal.js plugins.

```javascript
Reveal.initialize({
  controls: true,
  progress: true,
  history: true,
  center: true,
  markdown: {
    smartypants: true,
  },
  plugins: [RevealMarkdown, RevealHighlight, RevealNotes, RevealMath.KaTeX],
});
```

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

### Initialize and Test MathJax4 Plugin

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-mathjax4.html

This snippet demonstrates how to initialize the MathJax4 plugin within a reveal.js instance and verify its registration. It uses QUnit to ensure the plugin is correctly loaded and functional within the DOM.

```javascript
var testReveal = new Reveal(testContainer, { plugins: [RevealMath.MathJax4()] });
testReveal.initialize().then(function() {
  assert.ok(testReveal.hasPlugin('mathjax4'), 'MathJax4 plugin is registered');
}).catch(function(error) {
  assert.ok(false, 'MathJax4 plugin initialization failed: ' + error.message);
});
```

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

### Test Async Dependency Loading with QUnit

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-dependencies-async.html

This test suite initializes reveal.js with a set of dependencies and uses QUnit to verify that both synchronous and asynchronous scripts are loaded in the expected order. It tracks the execution sequence via a global variable and asserts the completion of all registered scripts.

```javascript
import 'reveal.css';
import 'qunit/qunit/qunit.css';
import QUnit from 'qunit';
import Reveal from 'reveal.js';

window.externalScriptSequence = '';
var scriptCount = 0;
QUnit.config.testTimeout = 30000;
QUnit.config.autostart = false;

QUnit.module( 'Async Dependencies' );
QUnit.test( 'Async scripts are loaded', function( assert ) {
	assert.expect( 5 );
	var done = assert.async( 5 );
	function callback( event ) {
		if( externalScriptSequence.length === 1 ) {
			assert.ok( externalScriptSequence === 'A', 'first callback was sync script' );
			done();
		} else {
			assert.ok( true, 'async script loaded' );
			done();
		}
		if( externalScriptSequence.length === 4 ) {
			assert.ok( externalScriptSequence.indexOf( 'A' ) !== -1 && externalScriptSequence.indexOf( 'B' ) !== -1 && externalScriptSequence.indexOf( 'C' ) !== -1 && externalScriptSequence.indexOf( 'D' ) !== -1, 'four unique scripts were loaded' );
			done();
		}
		scriptCount ++;
	}

	Reveal.initialize({
		dependencies: [
			{ src: 'assets/external-script-a.js', async: false, callback: callback },
			{ src: 'assets/external-script-b.js', async: true, callback: callback },
			{ src: 'assets/external-script-c.js', async: true, callback: callback },
			{ src: 'assets/external-script-d.js', async: true, callback: callback }
		]
	});
});
QUnit.start();
```

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

### Initialize Reveal.js with Transition Settings

Source: https://github.com/hakimel/reveal.js/blob/master/examples/transitions.html

This JavaScript snippet initializes the Reveal.js framework. It includes configuration options for centering slides, enabling browser history, and setting default transition behaviors.

```javascript
Reveal.initialize({
  center: true,
  history: true,
  transition: 'slide',
  transitionSpeed: 'slow',
  backgroundTransition: 'slide'
});
```

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

### Initialize Multiple reveal.js Instances

Source: https://github.com/hakimel/reveal.js/blob/master/examples/multiple-presentations.html

Demonstrates how to initialize two separate reveal.js decks on the same page with distinct configurations and plugins. It includes event listeners for slide changes and promise-based initialization for specific slide navigation.

```javascript
let deck1 = new Reveal(document.querySelector('.deck1'), { embedded: true, progress: false, keyboardCondition: 'focused', plugins: [RevealHighlight], }); deck1.on('slidechanged', () => { console.log('Deck 1 slide changed'); }); deck1.initialize(); let deck2 = new Reveal(document.querySelector('.deck2'), { embedded: true, progress: false, keyboardCondition: 'focused', plugins: [RevealMarkdown, RevealMath], }); deck2.initialize().then(() => { deck2.slide(1); }); deck2.on('slidechanged', () => { console.log('Deck 2 slide changed'); });
```

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

### Initialize Reveal.js with Hash Option

Source: https://github.com/hakimel/reveal.js/blob/master/examples/media.html

Initializes the reveal.js presentation framework with the 'hash' option enabled. This allows for deep linking to slides using the URL fragment.

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

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

### Manage Reveal.js Keyboard Bindings

Source: https://github.com/hakimel/reveal.js/blob/master/test/test.html

Shows how to add, remove, and trigger custom keyboard shortcuts in Reveal.js. It also demonstrates how bindings appear in the help overlay.

```javascript
Reveal.addKeyBinding({keyCode: 88, key: 'X', description: 'X-SHORTCUT-X'}, function() {
  console.log('callback triggered');
});
Reveal.toggleHelp( true );
// Verify binding exists in DOM
Reveal.removeKeyBinding( 88 );
```

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

### Initialize reveal.js Presentation

Source: https://github.com/hakimel/reveal.js/blob/master/examples/500-slides.html

This snippet initializes the reveal.js framework on the page. It accepts a configuration object where you can define global presentation settings such as transition effects.

```javascript
Reveal.initialize({
  transition: 'linear'
});
```

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

### Reveal.js Highlight Plugin Code Block Configuration

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-markdown.html

Initializes Reveal.js with Markdown and Highlight plugins, then tests various configurations for code blocks. This includes default line number behavior, setting language, enabling line numbers, and highlighting specific lines with offsets.

```javascript
let deck6 = new Reveal( document.querySelector( '.deck6' ), {
  plugins: [ Markdown, Highlight ]
})
deck6.addEventListener( 'ready', function() {
  QUnit.module( 'Code Blocks' );
  QUnit.test( 'Defaults to no line numbers', function( assert ) {
    assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.defaults .hljs:not([data-line-numbers])' ).length, 1 );
  });
  QUnit.test( 'Can set language', function( assert ) {
    assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-language .hljs.javascript:not([data-line-numbers])' ).length, 1 );
  });
  QUnit.test( '```[] enables line numbers', function( assert ) {
    assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-numbers .hljs[data-line-numbers=""]' ).length, 1 );
  });
  QUnit.test( '```[1,2,3] enables line highlights', function( assert ) {
    assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights .hljs[data-line-numbers="1,2,3"]' ).length, 1 );
  });
  QUnit.test( '```[234: ] line offset only', function( assert ) {
    assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-offset .hljs[data-ln-start-from="123"]' ).length, 1 );
  });
  QUnit.test( '```javascript [1,2,3] enables line highlights and sets language', function( assert ) {
    assert.strictEqual( deck6.getRevealElement().querySelectorAll( '.with-line-highlights-and-lanugage .hljs.javascript[data-line-numbers="1,2,3"]' ).length, 1 );
  });
  QUnit.test( '```javascript [123: 3,4,5] add line offset and enables line highlights and sets l' );
});
```

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

### Initialize Reveal.js PDF Export Test

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-pdf.html

Configures the QUnit test environment to verify Reveal.js initialization in PDF mode. It sets a test timeout and asserts that the Reveal.isReady() method returns true after initialization.

```javascript
import 'reveal.css';
import 'qunit/qunit/qunit.css';
import QUnit from 'qunit';
import Reveal from 'reveal.js';

QUnit.config.testTimeout = 30000;
QUnit.config.autostart = false;

Reveal.initialize({ pdf: true }).then(function() {
  QUnit.start();
  QUnit.test('Reveal.isReady', function(assert) {
    assert.strictEqual(Reveal.isReady(), true, 'returns true');
  });
});
```

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

### Reveal.js Markdown Plugin Configuration

Source: https://github.com/hakimel/reveal.js/blob/master/test/test-markdown.html

Initializes Reveal.js with the Markdown plugin and configures smartypants for enhanced typography. It also includes tests to verify smart quotes are activated.

```javascript
let deck4 = new Reveal( document.querySelector( '.deck4' ), {
  plugins: [ Markdown ]
});

deck4.addEventListener( 'ready', function() {
  QUnit.module( 'SmartyPants' );
  QUnit.test( 'Smartypants are set', function( assert ) { assert.strictEqual( deck4.getPlugin( 'markdown' ).markdownOptions.smartypants, true ); });
  QUnit.test( 'Smart quotes are activated', function( assert ) {
    var text = deck4.getRevealElement().querySelector( '.reveal .slides>section>p' ).textContent;
    assert.strictEqual( /['"].test( text ), false );
    assert.strictEqual( /["“”‘’"].test( text ), true );
  });
});
```

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

### HTML for Video Previews in Reveal.js

Source: https://github.com/hakimel/reveal.js/blob/master/examples/lightbox.html

Shows how to embed videos for previewing within Reveal.js presentations using standard image tags with video source URLs.

```html
<img src="https://static.slid.es/images/alphabet/v1/x.png" alt="Video Preview">
```