### Build Converter Examples (JavaScript)

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/README.adoc

Use these commands to build and preview examples using JavaScript and Opal.

```bash
$ bundle exec rake build:converter:opal
$ npm run examples
```

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

### Install Bundler

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/setup/pages/ruby-setup.adoc

Install Bundler if it is not already installed. Bundler is recommended for managing project dependencies.

```bash
$ gem install bundler
```

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

### Convert Examples (Ruby)

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/README.adoc

Use this command to convert AsciiDoc examples to reveal.js slide-decks using Ruby.

```bash
$ bundle exec rake examples:convert
```

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

### Install Custom Template Dependencies

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/setup/pages/ruby-setup.adoc

Install the newly added 'tilt' and 'slim' gems using Bundler after updating the Gemfile.

```bash
$ bundle install
```

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

### Rust Hello World Example (Concise)

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/source-rouge.html

A more concise version of the Rust 'Hello World!' program. This example is similar to the first but without extra whitespace.

```rust
fnmain(){println!("Hello World!");}
```

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

### Install Asciidoctor Reveal.js

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/olist.html

Install the Asciidoctor Reveal.js presentation system using the gem command. This is the primary method for setting up the presentation environment.

```bash
$ gem install asciidoctor
```

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

### Install Local Gems and Binaries

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/project/pages/hacking.adoc

Installs Ruby gems to a local directory and creates executable stubs in a specified path.

```console
bundle --path=.bundle/gems --binstubs=.bundle/.bin
```

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

### Kotlin Language Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/grid-layout.adoc

A simple 'Hello, World!' program in Kotlin, presented within a column.

```kotlin
fun main() {
    println("Hello, World!")
}

```

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

### Install reveal.js Converter

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/README.md

Installs the reveal.js converter and its required peer dependency, asciidoctor. Requires Node.js >= 20.

```sh
npm i --save asciidoctor @asciidoctor/reveal.js
```

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

### Multi-column Layout Example (Kotlin)

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/grid-layout.html

Demonstrates a simple multi-column layout using Kotlin code.

```kotlin
fun main() {
    println("Hello, World!")
}
```

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

### Initialize Node.js Project

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/setup/pages/node-js-setup.adoc

Create a package.json file to manage project dependencies and avoid warnings during installation.

```bash
npm init -y
```

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

### Install Homebrew with Ruby

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/listing.html

Installs Homebrew package manager using a Ruby script fetched from a URL. Requires curl and Ruby to be installed.

```shell
ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
```

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

### Install Dependencies with Bundler

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/project/pages/hacking.adoc

Installs project dependencies into a local .bundle/ directory to avoid conflicts with the global Ruby installation. Use this command when setting up the project for the first time or when working on a clean environment.

```bash
$ bundle --path=.bundle/gems --binstubs=.bundle/.bin
```

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

### Multi-column Layout Example (Clojure)

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/grid-layout.html

Demonstrates a simple multi-column layout using Clojure code.

```clojure
(defn -main [& args]
  (println "Hello, World!"))
```

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

### Multi-column Layout Example (Scala)

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/grid-layout.html

Demonstrates a simple multi-column layout using Scala code.

```scala
object HelloWorld {
  def main(args: Array[String]): Unit = {
    println("Hello, world!")
  }
}
```

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

### Scala Language Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/grid-layout.adoc

A 'Hello, world!' object in Scala, displayed in a column.

```scala
object HelloWorld {
  def main(args: Array[String]): Unit = {
    println("Hello, world!")
  }
}

```

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

### Update JavaScript Dependencies and Run Tests

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/project/pages/hacking.adoc

Installs updated Node.js packages, runs tests, and converts examples using npm.

```console
npm install
npm test
npm run examples
```

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

### Ordered List Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/data-attributes.html

Creates a numbered list for sequential items.

```asciidoc
1.  Protons
    
2.  Electrons
    
3.  Neutrons
```

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

### Sinatra 'Hello World' GET Request

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/colist.html

This snippet shows how to define a simple GET route '/hi' that returns 'Hello World!'. It requires the Sinatra library.

```ruby
require 'sinatra'

get '/hi' do
  "Hello World!"
end
```

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

### List reveal.js Plugins Directory Structure

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/pages/revealjs-plugins.adoc

Example output showing the directory structure after extracting additional reveal.js plugins.

```console
$ tree reveal.js-plugins -L 2
....
reveal.js-plugins
├── chalkboard
│   ├── img
│   ├── plugin.js
│   ├── README.md
│   └── style.css
└── customcontrols
    ├── plugin.js
    ├── README.md
    └── style.css

4 directories, 6 files
....
```

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

### Unordered List Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/data-attributes.html

Creates a bulleted list for items without a specific order.

```asciidoc
*   Linux
    
*   macOS
    
*   Windows
```

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

### Clojure Language Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/grid-layout.adoc

A basic 'Hello, World!' function in Clojure, shown within a column.

```clojure
(defn -main [& args]
  (println "Hello, World!"))

```

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

### Example AsciiDoc for attribute inheritance

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/project/pages/hacking.adoc

An example AsciiDoc document showing how attributes like 'transition-speed' can be set globally and inherited by slides.

```asciidoc
= My Slides
:transition-speed: fast

== First Slide
```

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

### Superscript and Subscript Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/text-formatting.html

Demonstrates the H2O formula, which can be rendered with subscript.

```asciidoc
H2O
```

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

### Verify Bundler Installation

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/setup/pages/ruby-setup.adoc

Check if Bundler is installed on your system. This is a prerequisite for managing Ruby gems.

```bash
$ bundle -v
```

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

### Reveal.js Chalkboard Plugin Configuration Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/reveal.js-plugins-4.6.0/chalkboard/README.md

Demonstrates how to configure the Reveal.js Chalkboard plugin within the Reveal.js initialization. This includes setting various options like drawing widths, storage, theme, background, grid, eraser, boardmarkers, and chalks.

```javascript
Reveal.initialize({
	// ...
    chalkboard: {
        boardmarkerWidth: 3,
        chalkWidth: 7,
        chalkEffect: 1.0,
        storage: null,
        src: null,
        readOnly: undefined,
        transition: 800,
        theme: "chalkboard",
        background: [ 'rgba(127,127,127,.1)' , path + 'img/blackboard.png' ],
        grid: { color: 'rgb(50,50,10,0.5)', distance: 80, width: 2},
        eraser: { src: path + 'img/sponge.png', radius: 20},
        boardmarkers : [
                { color: 'rgba(100,100,100,1)', cursor: 'url(' + path + 'img/boardmarker-black.png), auto'},
                { color: 'rgba(30,144,255, 1)', cursor: 'url(' + path + 'img/boardmarker-blue.png), auto'},
                { color: 'rgba(220,20,60,1)', cursor: 'url(' + path + 'img/boardmarker-red.png), auto'},
                { color: 'rgba(50,205,50,1)', cursor: 'url(' + path + 'img/boardmarker-green.png), auto'},
                { color: 'rgba(255,140,0,1)', cursor: 'url(' + path + 'img/boardmarker-orange.png), auto'},
                { color: 'rgba(150,0,20150,1)', cursor: 'url(' + path + 'img/boardmarker-purple.png), auto'},
                { color: 'rgba(255,220,0,1)', cursor: 'url(' + path + 'img/boardmarker-yellow.png), auto'}
        ],
        chalks: [
                { color: 'rgba(255,255,255,0.5)', cursor: 'url(' + path + 'img/chalk-white.png), auto'},
                { color: 'rgba(96, 154, 244, 0.5)', cursor: 'url(' + path + 'img/chalk-blue.png), auto'},
                { color: 'rgba(237, 20, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-red.png), auto'},
                { color: 'rgba(20, 237, 28, 0.5)', cursor: 'url(' + path + 'img/chalk-green.png), auto'},
                { color: 'rgba(220, 133, 41, 0.5)', cursor: 'url(' + path + 'img/chalk-orange.png), auto'},
                { color: 'rgba(220,0,220,0.5)', cursor: 'url(' + path + 'img/chalk-purple.png), auto'},
                { color: 'rgba(255,220,0,0.5)', cursor: 'url(' + path + 'img/chalk-yellow.png), auto'}
        ]
    },
    // ...

});

```

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

### Install Project Gems with Bundler

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/setup/pages/ruby-setup.adoc

Install all gems specified in the Gemfile locally within the project. This ensures isolated dependency management.

```bash
$ bundle config --local path .bundle/gems
$ bundle
```

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

### Basic Ruby Program

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/source-coderay.adoc

A simple 'Hello, world!' program in Ruby. Ensure the 'coderay' gem is installed and configured for this to render with highlighting.

```ruby
# My first Ruby program
# On my way to Ruby fame & fortune!

puts 'Hello, world!'
```

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

### Run Project Tests

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/project/pages/hacking.adoc

Executes the project's doctests using Rake. This command assumes dependencies are already installed. If not, use the 'Install Dependencies with Bundler' command first.

```bash
$ bundle exec rake doctest
```

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

### Install Asciidoctor reveal.js gems locally

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/project/pages/hacking.adoc

Configure Bundler to use local gem sources and install dependencies. This is a prerequisite for testing the RubyGem package locally.

```bash
$ bundle config --local github.https true
$ bundle --path=.bundle/gems --binstubs=.bundle/.bin
```

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

### TODO List Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/data-attributes.html

A simple unordered list used to denote tasks or items to be done.

```asciidoc
*   Dig
    
*   Plant
    
*   Hose
```

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

### Install local Asciidoctor reveal.js tarball in a test project

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/project/pages/hacking.adoc

Install the generated tarball of the Asciidoctor reveal.js project into a separate test project. This allows for testing the Node.js package locally.

```bash
$ mkdir test-project
$ cd test-project
$ npm i --save ../asciidoctor-reveal.js/asciidoctor-reveal.js-<version>.tgz
```

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

### Checklist Data Attribute Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/pages/syntax/data-attributes.adoc

Shows how to use a `data-checklist` attribute for checklist-like behavior.

```asciidoc
include::example$data-attributes.adoc[tags=checklist]
```

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

### Configure HTTP Routing with Java

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/listing.html

Configures application routing rules using Java. This example defines a rule to log incoming requests based on path matching.

```java
public class ApplicationConfigurationProvider extends HttpConfigurationProvider {

   public Configuration getConfiguration(ServletContext context) {
      return ConfigurationBuilder.begin()
               .addRule()
               .when(Direction.isInbound().and(Path.matches("/{path}")))
               .perform(Log.message(Level.INFO, "Client requested path: {path}"))
               .where("path").matches(".*");
   }
}
```

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

### Asciidoc Grid Layout Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/release-4.0.adoc

Illustrates how to create a simple grid layout using Asciidoc's column feature. This is useful for structuring content side-by-side.

```asciidoc
[.columns]
=== Easy Grid Layout

[.column]
* Easy

[.column]
* Flexible

[.column]
Grid Layout

[.column.is-one-third]
--
[source,asciidoc]
[...] 
....
```

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

### Render Math Equation with LaTeX

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/mathjax.html

Use standard LaTeX syntax enclosed in \$\$ for inline math equations. This example shows a square root equation.

```asciidoc
\$\sqrt{37} = \sqrt{\frac{73^2-1}{12^2}} \approx \frac{73}{12} (1 - \frac{1}{2\cdot73^2})\$
```

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

### Configure Security with AntMatchers

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/source-emphasis.html

Example of configuring security requests using antMatchers in Java.

```java
protected void configure(HttpSecurity http) throws Exception {
        http
            .authorizeRequests()
                .antMatchers("/resources/**").permitAll()
                .anyRequest().authenticated()
                .and()
            .formLogin()
                .loginPage("/login")
                .permitAll();

    }
```

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

### Column Text Alignment Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/grid-layout.html

Illustrates how text alignment can be applied within columns, potentially spanning multiple lines.

```asciidoc
Something Short

Something So Long That We Need It Aligned

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Something Short

Something So Long That We Need It Aligned
```

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

### Render Summation Equation with LaTeX

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/mathjax.html

Use standard LaTeX syntax enclosed in \$\$ for inline math equations. This example shows a summation equation.

```asciidoc
\$\sum
_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}\$
```

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

### Asciidoc FontAwesome Integration Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/release-4.0.adoc

Demonstrates the integration of FontAwesome icons within Asciidoc content. Icons can be used to add visual elements and emphasis to text.

```asciidoc
Expressive icon:palette[]
Icons icon:icons[]
at your Fingertips
icon:hand-holding-heart[]

[.red]
icon:heart[size=3x]
```

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

### Inline Image Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/data-attributes.html

Shows how to embed images directly within the text flow using Markdown image syntax.

```asciidoc
 ![cute-cat-laying](images/cute-cat-1.jpg)
```

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

### Check Asciidoctor reveal.js Version

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/setup/pages/standalone-executable.adoc

Verify the installation of the Asciidoctor reveal.js executable by checking its version. This confirms the toolchain is set up correctly.

```bash
./asciidoctor-revealjs --version
```

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

### Create Project Directory

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/setup/pages/ruby-setup.adoc

Set up a new directory for your presentation project and navigate into it.

```bash
$ mkdir my-awesome-presentation
$ cd my-awesome-presentation
```

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

### Update Ruby Dependencies and Run Tests

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/project/pages/hacking.adoc

Installs updated Ruby gems, runs RuboCop for code analysis, executes tests, and converts examples.

```console
bundle install
bundle exec rubocop
bundle exec rake test
bundle exec rake examples:convert
```

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

### Video Embed Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/examples/data-attributes.adoc

Embeds a video, likely from a platform like YouTube, using the `video` directive. Attributes specify the video ID, source type, and start time.

```asciidoc
video::kZH9JtPBq7k[youtube,start=34,data-video-id=kZH9JtPBq7k]
```

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

### Package Asciidoctor reveal.js for Node.js testing

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/project/pages/hacking.adoc

Create a tarball of the Asciidoctor reveal.js project for local installation and testing within a Node.js environment.

```bash
$ npm pack
```

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

### Asciidoc Presentation Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/setup/pages/standalone-executable.adoc

A minimal AsciiDoc file structure for a presentation, including the title and a basic slide. The `:revealjsdir:` attribute is crucial for linking the reveal.js framework.

```asciidoc
= Title Slide
:revealjsdir: reveal.js

== Slide One

* Foo
* Bar
* World
```

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

### Interactive Checklist Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/examples/data-attributes.adoc

Creates an interactive checklist using Asciidoctor's list syntax with the `[%interactive]` attribute. Data attributes like `data-state` can control its appearance or behavior.

```asciidoc
[%interactive,data-state=in-progress]
- [ ] Dig
- [x] Plant
- [ ] Hose
```

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

### Stem Data Attribute Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/pages/syntax/data-attributes.adoc

Example of using a `data-stem` attribute, likely for mathematical or scientific notation.

```asciidoc
include::example$data-attributes.adoc[tags=stem]
```

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

### Synchronized Step-by-Step Syntax Highlighting

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/release-5.2.adoc

Shows how to use fragments and data-fragment-index to achieve synchronized step-by-step syntax highlighting in presentations.

```java
Optional<String> foo();
Optional<String> bar();
Optional<String> foobar();
```

```text
step-by-step syntax highlighting
```

```text
In combination with data-fragment-index
```

```text
Allow synchronized fragment display
```

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

### Reveal.js Initialization with Multiple Options

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/history-regression-tests.html

A comprehensive Reveal.js initialization configuration including controls, progress, slide numbers, history, keyboard shortcuts, overview, layout, centering, touch support, loop, RTL, navigation mode, shuffling, fragments, fragment URL tracking, embedding, help overlay, auto-play media, iframe preloading, auto-sliding, auto-slide stoppable, auto-slide method, default timing, and total time.

```javascript
Reveal.initialize({
  // Display presentation control arrows
  controls: true,

  // Help the user learn the controls by providing hints, for example by
  // bouncing the down arrow when they first encounter a vertical slide
  controlsTutorial: true,

  // Determines where controls appear, "edges" or "bottom-right"
  controlsLayout: 'bottom-right',

  // Visibility rule for backwards navigation arrows; "faded", "hidden"
  // or "visible"
  controlsBackArrows: 'faded',

  // Display a presentation progress bar
  progress: true,

  // Display the page number of the current slide
  slideNumber: false,

  // Control which views the slide number displays on
  showSlideNumber: 'all',

  // Add the current slide number to the URL hash so that reloading the
  // page/copying the URL will return you to the same slide
  hash: false,

  // Push each slide change to the browser history. Implies `hash: true`
  history: true,

  // Enable keyboard shortcuts for navigation
  keyboard: true,

  // Enable the slide overview mode
  overview: true,

  // Disables the default reveal.js slide layout so that you can use custom CSS layout
  disableLayout: false,

  // Vertical centering of slides
  center: true,

  // Enables touch navigation on devices with touch input
  touch: true,

  // Loop the presentation
  loop: false,

  // Change the presentation direction to be RTL
  rtl: false,

  // See https://github.com/hakimel/reveal.js/#navigation-mode
  navigationMode: 'default',

  // Randomizes the order of slides each time the presentation loads
  shuffle: false,

  // Turns fragments on and off globally
  fragments: true,

  // Flags whether to include the current fragment in the URL,
  // so that reloading brings you to the same fragment position
  fragmentInURL: false,

  // Flags if the presentation is running in an embedded mode,
  // i.e. contained within a limited portion of the screen
  embedded: false,

  // Flags if we should show a help overlay when the questionmark
  // key is pressed
  help: true,

  // Flags if speaker notes should be visible to all viewers
  showNotes: false,

  // Global override for autolaying embedded media (video/audio/iframe)
  // - null: Media will only autoplay if data-autoplay is present
  // - true: All media will autoplay, regardless of individual setting
  // - false: No media will autoplay, regardless of individual setting
  autoPlayMedia: null,

  // Global override for preloading lazy-loaded iframes
  // - null: Iframes with data-src AND data-preload will be loaded when within
  // the viewDistance, iframes with only data-src will be loaded when visible
  // - true: All iframes with data-src will be loaded when within the viewDistance
  // - false: All iframes with data-src will be loaded only when visible
  preloadIframes: null,

  // Number of milliseconds between automatically proceeding to the
  // next slide, disabled when set to 0, this value can be overwritten
  // by using a data-autoslide attribute on your slides
  autoSlide: 0,

  // Stop auto-sliding after user input
  autoSlideStoppable: true,

  // Use this method for navigation when auto-sliding
  autoSlideMethod: Reveal.navigateNext,

  // Specify the average time in seconds that you think you will spend
  // presenting each slide. This is used to show a pacing timer in the
  // speaker view
  defaultTiming: 120,

  // Specify the total time in seconds that is available to
  // present. If this is set to a nonzero value, the pacing
  // timer will work out the time available for each slide,
  // instead of using the defaultTiming value
  totalTime: 0,

  // Specify the minimum amount of time you want to allot to
  // each slide, if using the totalTime calculation method.
});
```

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

### Rust Hello World with Multiple Callouts

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/source-callouts.html

Illustrates a Rust program with multiple callouts. Each callout can point to a distinct explanation.

```rust
fn main() { (1)
    println!("Hello World!"); (2)
}
```

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

### Basic Rust Hello World with Callout

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/source-callouts.html

Demonstrates a simple Rust program with a single callout. Callouts are used to reference external explanations.

```rust
fn main() {
    println!("Hello World!"); (1)
}
```

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

### Initialize Reveal.js with Default Settings

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/revealjs-plugin-activation.html

This snippet shows the basic initialization of Reveal.js with common configuration options. Use this to set up your presentation's core features.

```javascript
Reveal.initialize({
  // Display presentation control arrows
  controls: true,
  // Help the user learn the controls by providing hints, for example by
  // bouncing the down arrow when they first encounter a vertical slide
  controlsTutorial: true,
  // Determines where controls appear, "edges" or "bottom-right"
  controlsLayout: 'bottom-right',
  // Visibility rule for backwards navigation arrows; "faded", "hidden"
  // or "visible"
  controlsBackArrows: 'faded',
  // Display a presentation progress bar
  progress: true,
  // Display the page number of the current slide
  slideNumber: false,
  // Control which views the slide number displays on
  showSlideNumber: 'all',
  // Add the current slide number to the URL hash so that reloading the
  // page/copying the URL will return you to the same slide
  hash: false,
  // Push each slide change to the browser history. Implies `hash: true`
  history: false,
  // Enable keyboard shortcuts for navigation
  keyboard: true,
  // Enable the slide overview mode
  overview: true,
  // Disables the default reveal.js slide layout so that you can use custom CSS layout
  disableLayout: false,
  // Vertical centering of slides
  center: true,
  // Enables touch navigation on devices with touch input
  touch: true,
  // Loop the presentation
  loop: false,
  // Change the presentation direction to be RTL
  rtl: false,
  // See https://github.com/hakimel/reveal.js/#navigation-mode
  navigationMode: 'default',
  // Randomizes the order of slides each time the presentation loads
  shuffle: false,
  // Turns fragments on and off globally
  fragments: true,
  // Flags whether to include the current fragment in the URL,
  // so that reloading brings you to the same fragment position
  fragmentInURL: false,
  // Flags if the presentation is running in an embedded mode,
  // i.e. contained within a limited portion of the screen
  embedded: false,
  // Flags if we should show a help overlay when the questionmark // key is pressed
  help: true,
  // Flags if speaker notes should be visible to all viewers
  showNotes: false,
  // Global override for autolaying embedded media (video/audio/iframe)
  // - null: Media will only autoplay if data-autoplay is present
  // - true: All media will autoplay, regardless of individual setting
  // - false: No media will autoplay, regardless of individual setting
  autoPlayMedia: null,
  // Global override for preloading lazy-loaded iframes
  // - null: Iframes with data-src AND data-preload will be loaded when within
  // the viewDistance, iframes with only data-src will be loaded when visible
  // - true: All iframes with data-src will be loaded when within the viewDistance
  // - false: All iframes with data-src will be loaded only when visible
  preloadIframes: null,
  // Number of milliseconds between automatically proceeding to the
  // next slide, disabled when set to 0, this value can be overwritten
  // by using a data-autoslide attribute on your slides
  autoSlide: 0,
  // Stop auto-sliding after user input
  autoSlideStoppable: true,
  // Use this method for navigation when auto-sliding
  autoSlideMethod: Reveal.navigateNext,
  // Specify the average time in seconds that you think you will spend
  // presenting each slide. This is used to show a pacing timer in the
  // speaker view
  defaultTiming: 120,
  // Specify the total time in seconds that is available to
  // present. If this is set to a nonzero value, the pacing
  // timer will work out the time available for each slide,
  // instead of using the defaultTiming value
  totalTime: 0,
  // Specify the minimum amount of time you want to allot to
  // each slide, if using the totalTime calculation method.
});
```

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

### Blockquote Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/data-attributes.html

Renders a blockquote for displaying cited text.

```asciidoc
> Documentation is a distillation of many long, squiggly adventures.
```

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

### Initialize reveal.js Plugins in Footer Docinfo

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/pages/revealjs-plugins.adoc

Use this script in a footer docinfo file to configure customcontrols and initialize the chalkboard and customcontrols plugins.

```html
<script>
  Reveal.configure({
    customcontrols: {
      controls: [
        { icon: '<i class="fa fa-pen-square"></i>',
          title: 'Toggle chalkboard (B)',
          action: 'RevealChalkboard.toggleChalkboard();' },
        { icon: '<i class="fa fa-pen"></i>',
          title: 'Toggle notes canvas (C)',
          action: 'RevealChalkboard.toggleNotesCanvas();' }
      ]
    }
  }) // <.>
  RevealChalkboard.init(Reveal) // <.>
  RevealCustomControls.init(Reveal) // <.>
</script>
```

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

### Poem Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/data-attributes.html

Formats text as a poem, preserving line breaks and indentation.

```asciidoc
The fog comes
on little cat feet.

two lines from the poem Fog  
— Carl Sandburg
```

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

### Code Callout List with Steps

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/steps.adoc

Demonstrates how to use the 'step' attribute in conjunction with HTML code blocks and callouts for step-by-step explanations.

```html
<b>complex code</b> &lt;!--1--&gt;
<b>more complex code</b> &lt;!--2--&gt;
<b>most complex code</b> &lt;!--3--&gt;
```

```asciidoc
[%step]
&lt;1&gt; complex code needs a callout
&lt;2&gt; as much as a more complex code
&lt;3&gt; but less than the most complex code
```

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

### Quote Data Attribute Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/pages/syntax/data-attributes.adoc

Illustrates the use of a `data-quote` attribute for blockquotes.

```asciidoc
include::example$data-attributes.adoc[tags=quote]
```

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

### Multi-Column Layout with Wrap

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/grid-layout.adoc

Shows how to create a multi-column layout where content can wrap. Each column is defined using [.column].

```asciidoc
[.columns.wrap]
== Multi-columns with wrap

[.column]
--
.Kotlin
[source,kotlin]
----
fun main() {
    println("Hello, World!")
}
----
--

[.column]
--
.Clojure
[source,clojure]
----
(defn -main [& args]
  (println "Hello, World!"))
----
--

[.column]
--
.Scala
[source,scala]
----
object HelloWorld {
  def main(args: Array[String]): Unit = {
    println("Hello, world!")
  }
}
----
--

```

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

### Source Code Data Attribute Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/pages/syntax/data-attributes.adoc

Demonstrates declaring a `data-source-code` attribute on a block.

```asciidoc
include::example$data-attributes.adoc[tags=source-code]
```

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

### Rust Hello World with reveal.js 'mark' tags

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/source-emphasis.html

Illustrates using reveal.js's <mark> tags within Asciidoctor for highlighting Rust code, requiring 'subs="none"'.

```rust
fn main() {
    println!("Hello marked World!");
}
```

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

### Reveal.js Configuration Options (Continued)

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/revealjs-plugins.html

Further configuration options for Reveal.js, including settings for slide pacing, cursor visibility, link previews, and background transitions. These settings help fine-tune the presentation's behavior and appearance.

```javascript
Reveal.initialize({
// If // the automated time allocation causes slide pacing to fall // below this threshold, then you will see an alert in the // speaker notes window
minimumTimePerSlide: 0,

// Enable slide navigation via mouse wheel
mouseWheel: false,

// Hide cursor if inactive
hideInactiveCursor: true,

// Time before the cursor is hidden (in ms)
hideCursorTime: 5000,

// Hides the address bar on mobile devices
hideAddressBar: true,

// Opens links in an iframe preview overlay
// Add `data-preview-link` and `data-preview-link="false"` to customise each link // individually
previewLinks: false,

// Transition style (e.g., none, fade, slide, convex, concave, zoom)
transition: 'slide',

// Transition speed (e.g., default, fast, slow)
transitionSpeed: 'default',

// Transition style for full page slide backgrounds (e.g., none, fade, slide, convex, concave, zoom)
backgroundTransition: 'fade',

// Number of slides away from the current that are visible
viewDistance: 3,

// Number of slides away from the current that are visible on mobile // devices. It is advisable to set this to a lower number than // viewDistance in order to save resources.
mobileViewDistance: 3,

// Parallax background image (e.g., "'https://s3.amazonaws.com/hakim-static/reveal-js/reveal-parallax-1.jpg'")
parallaxBackgroundImage: '',

// Parallax background size in CSS syntax (e.g., "2100px 900px")
parallaxBackgroundSize: '',

// Number of pixels to move the parallax background per slide
// - Calculated automatically unless specified
// - Set to 0 to disable movement along an axis
parallaxBackgroundHorizontal: null,
parallaxBackgroundVertical: null,

// The display mode that will be used to show slides
display: 'block',

// The "normal" size of the presentation, aspect ratio will be preserved
// when the presentation is scaled to fit different resolutions. Can be // specified using percentage units.
width: 960,
height: 700,

// Factor of the display size that should remain empty around the content
margin: 0.1,

// Bounds for smallest/largest possible scale to apply to content
minScale: 0.2,
maxScale: 1.5,

// PDF Export Options
// Put each fragment on a separate page
pdfSeparateFragments: true,

// For slides that do not fit on a page, max number of pages
pdfMaxPagesPerSlide: 1,

// Optional libraries used to extend on reveal.js
plugins: [RevealZoom, RevealNotes],
});
```

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

### Ordered List with Steps

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/steps.adoc

Apply '[%step]' to an ordered list to reveal each item one by one.

```asciidoc
[%step]
. Protons
. Electrons
. Neutrons
```

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

### Basic Fragment Usage

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/fragments.adoc

Demonstrates the basic usage of fragments in a reveal.js presentation. Fragments are revealed step-by-step.

```asciidoc
[%step]
* Fragments
* Are a reveal.js feature
* Very familiar to Powerpoint users
```

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

### Video Data Attribute Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/pages/syntax/data-attributes.adoc

Shows how to use a `data-video` attribute for embedding video content.

```asciidoc
include::example$data-attributes.adoc[tags=video]
```

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

### YouTube Video with Autoplay

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/video.adoc

Embed a YouTube video that automatically starts playing. The video will be auto-sized.

```asciidoc
video::kZH9JtPBq7k[youtube, start=34, options=autoplay]
```

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

### Default Table with Header

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/tables-styles.adoc

Demonstrates a basic table with a header row. Use the 'header' option to define the first row as a header.

```asciidoc
[cols=2*,options=header]
|===
| Header 1
| Header 2

| Row 1, Col1
| Row 1, Col2

| Row 2, Col1
| Row 2, Col2

|===
```

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

### Unordered List with Steps

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/steps.adoc

Use the '[%step]' attribute on an unordered list to make each list item appear sequentially.

```asciidoc
[%step]
* Edgar Allan Poe
* Sheri S. Tepper
* Bill Bryson
```

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

### Clone reveal.js Framework (Optional)

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/setup/pages/ruby-setup.adoc

Optionally clone the reveal.js framework to customize themes or view slides offline. This step is not required for basic conversion.

```bash
$ git clone -b 6.0.1 --depth 1 https://github.com/hakimel/reveal.js.git
```

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

### Audio Data Attribute Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/pages/syntax/data-attributes.adoc

Demonstrates declaring a `data-audio` attribute, potentially for embedding audio content.

```asciidoc
include::example$data-attributes.adoc[tags=audio]
```

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

### Checklist Items

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/ulist.html

Demonstrates how to create checklist items using asterisks.

```asciidoc
* checked
    
* also checked
    
* not checked
    
* normal list item
```

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

### Paragraph with Listing Style

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/source-highlightjs.adoc

An example of a paragraph styled using the `listing` block type, preserving monospace markup.

```text
This is an example of a paragraph styled with `listing`.
Notice that the monospace markup is preserved in the output.
```

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

### Get List of Contributors

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/project/pages/hacking.adoc

Retrieves a unique, sorted list of contributors from git log since a specified tag.

```bash
git log %prev-version-tag%.. --format="%aN" --reverse | perl -e 'my %dedupe; while (<STDIN>) { print unless $dedupe{$_}++}' | sort
```

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

### Read User Input in Shell

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/listing.html

Prompts the user for their name and prints a greeting. This is a basic example of interactive shell scripting.

```shell
echo -n "Please enter your name: "
read name
echo "Hello, $name!"
```

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

### Run Tests with npm

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/js/CONTRIBUTING.md

Execute the test suite using npm. This command is suitable for Node.js versions 20 and above.

```sh
npm test            # node --test js/test/  (Node >= 20)
```

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

### Basic Rust Hello World

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/source-pygments.adoc

A simple Rust program to print 'Hello World!'. This snippet demonstrates basic syntax highlighting for Rust code.

```rust
fn main() {
    println!("Hello World!");
}
```

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

### Example Admonition Slide

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/pages/syntax/admonitions.adoc

Demonstrates how to use a WARNING admonition within a slide in Asciidoctor. This highlights important or cautionary information.

```asciidoc
== But first

WARNING: This presentation is dangerous!
```

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

### Initial Planet Data

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/examples/auto-animate-code.adoc

This snippet initializes an array with a single planet object. It serves as the starting point for the auto-animation sequence.

```javascript
let planets = [
  { name: 'mars', diameter: 6779 },
]
```

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

### Prepare Next Development Version

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/project/pages/hacking.adoc

Automates the process of bumping the minor version for the next development cycle and commits the changes.

```console
npm run release:next
```

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

### Initialize Reveal.js with Fragment Options

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/test/doctest/fragments.html

This snippet shows how to initialize Reveal.js with options related to fragments, such as enabling fragments globally and including fragments in the URL.

```javascript
Reveal.initialize({
  // ... other options
  fragments: true,
  fragmentInURL: true,
  // ... other options
});
```

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

### Asciidoctor CLI Version Output

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/setup/pages/node-js-setup.adoc

Example output when verifying the Asciidoctor CLI version, showing Asciidoctor reveal.js and Asciidoctor.js versions.

```console
Asciidoctor reveal.js 6.0.0 using Asciidoctor.js 4.0.0 (Asciidoctor 2.0.26) [https://asciidoctor.org]
Runtime Environment (node v24.16.0 on linux)
CLI version 4.0.0
```

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

### Audio Embed Example

Source: https://github.com/asciidoctor/asciidoctor-reveal.js/blob/master/docs/modules/converter/examples/data-attributes.adoc

Embeds an audio file using the `audio` directive. The `data-license` attribute can specify licensing information for the audio.

```asciidoc
audio::flock-of-seagulls.mp3[data-license="cc-3.0"]
```