reveal.js Documentation

reveal.js is a framework for creating HTML-based presentations. It supports advanced features such as:

• Nested slides: Create hierarchical slide structures.
• Markdown contents: Write slide content using Markdown syntax.
• PDF export: Export presentations to PDF format.
• Speaker notes: Include notes for the presenter.
• JavaScript API: Programmatically control and extend the presentation.

For users who prefer a graphical interface instead of writing HTML or Markdown, an online editor is available at http://slides.com.

[Boost].SML (State Machine Language/Lite/Library) is a scalable, C++14, single-header-only state machine library with no dependencies. It is designed to implement UML state machines using an embedded Domain Specific Language (eUML) while addressing common issues found in other libraries like Boost.MSM, such as long compilation times, large binary sizes, and heavy macro usage.

Key Features

Supported UML Features:

• Transitions (Anonymous, Internal, Self, and No transition)
• Actions and Guards
• State entry/exit actions
• Orthogonal regions
• Sub/Composite state machines
• History
• Defer/Process

Additional Features:

• Logging
• Testing
• Runtime Dispatcher
• Dependency Injection integration

Understanding the directory layout of a reveal.js installation:

• css/: Contains the core styles required for the project to function.
• js/: Contains the core JavaScript files.
• plugin/: Contains components developed as extensions to reveal.js.
• lib/: Contains third-party assets including JavaScript, CSS, and fonts.

You can add custom extensions to reveal.js using a dependency object. Each object supports the following properties:

• src: Path to the script to load.
• async: [optional] If true, the script loads after reveal.js has started (defaults to false).
• callback: [optional] Function to execute once the script has loaded.
• condition: [optional] A function that must return true for the script to be loaded.

You can apply specific CSS classes to the document element based on the active slide by using the data-state attribute on a <section>. You can also listen for these state changes in JavaScript.

HTML: <section data-state="somestate">...</section>

JavaScript: Reveal.addEventListener( 'somestate', callback, false );

SML does not use exceptions internally and can be compiled with -fno-exceptions.

Behavior when exceptions are thrown:

• If a guard throws: The State Machine remains in its current state.
• If an action throws: The State Machine will be in the new state.
• Catching exceptions: You can catch exceptions using the transition table via an exception event.

When choosing a state machine library, [Boost].SML is compared against Boost.MSM-eUML and Boost.Statechart based on several criteria:

Core Specifications

• Standard: [Boost].SML requires C++14, while the others use C++98/03.
• Linkage: All three are header only.
• License: All use Boost 1.0.

Feature Comparison

Note: ~ indicates partial or approximate support; - indicates no support; ✓ indicates full support.

SML (State Machine Language) provides a syntax for defining state machines that maps to standard UML 2.5 concepts. Use the following syntax mappings to implement state machine logic:

• Initial Pseudostate: The entry point of the machine. Represented by * "state_name"_s.
• Terminate Pseudostate: A state that ends the machine with no escape. Represented by sml::X.
• External Transition: A transition that conditionally updates the current state based on an event, an optional guard, and an optional action. Syntax: "src_state"_s + event [ guard ] / action = "dst_state"_s.
• Anonymous Transition: A transition that occurs without a specific trigger or event. Syntax: "src_state"_s = "dst_state"_s.

A state machine is composed of states and transitions triggered by events.

Events

An Event is a unique type. You can define it as a struct or use the sml::event<T> wrapper. If using Clang/GCC, you can use the _e literal for on-the-fly creation (note: these do not store data).

States

A State represents the current location of the machine flow. You can define states using sml::state<T>. If using Clang/GCC, you can use the _s literal. States cannot hold data; instead, data is injected into guards and actions.

Special States

• Terminate State: Represented by X. It stops all further event processing.
• Composite States: A state machine can be a state itself using sml::state<state_machine>.

Every theme .scss file must follow this specific order of operations to function correctly:

1. Include mixins.scss: Import /css/theme/template/mixins.scss to access shared utility functions.
2. Include settings.scss: Import /css/theme/template/settings.scss. This declares the custom variables required by the template. You can override these variables in the next step.
3. Override: Define your custom styles here. This includes overriding variables (defined in settings.scss) or adding custom selectors and styles.
4. Include theme.scss: Import /css/theme/template/theme.scss. This is the final step where the template generates the actual CSS output based on the variables and styles you provided.

Speaker notes allow you to view per-slide notes in a separate browser window (accessible by pressing the 's' key).

Methods to define notes:

1. Using <aside> element: Append an <aside> element to a <section>.
2. Using data-notes attribute: Add data-notes="your notes here" to the <section> tag.
3. Using Markdown plugin: Use a special delimiter (e.g., Note:) in your Markdown file.

Note: When running locally, reveal.js must be served from a local web server. To make notes visible to the audience, set the showNotes configuration value to true during initialization.

<section>
	<h2 class="title">Some Slide</h2>

	<aside class="notes">
		Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
	</aside>
</section>