Directives¶

sphinx-revealjs provides some directives to customize presence and behaviors.

For customize presentation¶

Sphinx can manage multiple documents, so that sphinx-revealjs can build multiple presentation slides.

If you want to configure one presentaion from some, use this directive into your source.

.. revealjs-slide::¶

Write revealjs-slide directive on directly below of title header.

Note

Directive based customize has options less than conf based because implementation restrict.

:theme: (string)¶: Override revealjs_style_theme.

:google_font: (string)¶: Override revealjs_google_fonts, but it can specify only one.

Warning

This option is not work in v2.x. It will removed in v3.x

:conf: (JSON-string or no-value)¶: Override revealjs_script_conf, but single line only.

Usage:

Presentation title
==================

.. revealjs-slide::
   :theme: moon

Section
-------

Content

For customize sections¶

If you want to change behavior of sections, use these directives.

.. revealjs-section::¶

To change behavior per section, write directive per section.

:data-XXX:¶: This directive can accept any data- attributes included options of section element for Reveal.js 1. For more information, please see Reveal.js documentation.

Note

This may be not completed all attributes for Reveal.js. If you find missing attribute, pleas post issues or pull-requests into GitHub.

Usage:

Write revealjs-slide directive on directly below of section title header.

Title
=====

Section
-------

.. revealjs-section::
   :data-background-color: #009900

.. revealjs-break::¶

If you want to transition section with keeping title, revealjs-break can use.

Usage:

Write revealjs-break to point of want to split section.

Title
=====

Section
-------

Content 1

.. revealjs-break::

Content 2(next slide)

:data-XXX:¶: It accepts attributes as same as revealjs-section.

:notitle:¶: If it is set in directive, next section page does not display title.

.. revealjs-vertical::¶

To change behavior of sections rendered vertical (called as vertical slides 2).

:data-XXX:¶: It accepts attributes as same as revealjs-section. There are affected on all slides vertical from declared section.

Usage:

Write revealjs-vertical to point of want to split section (second level).

Title
=====

.. revaeljs-vertical::
   :data-background-color: #009900

For interactive contents¶

.. revealjs-code-block::¶

This is extends of code-block direcrive for presentation.

If you want to use custom attributes in code-block.

:data-line-numbers: (string or no value)¶: Code highlighting pattern. See Reveal.js document

Example:

.. revealjs-code-block:: python
   :data-line-numbers: 1

   def hello():
       print("world")

:data-ln-start-from: (integer)¶: Set number of first-line in code block. When this is assigned, display line numbers even if data-line-numbers is not set.

.. revealjs-code-block:: python
   :data-ln-start-from: 3

   print(datetime.datetime.now())

Please see `Reveal.js document <https://revealjs.com/code/#line-number-offset-4.2.0>`_.

.. revealjs-literalinclude::¶

This is extends of literalinclude direcrive for presentation.

If you want to use custom attributes in literalinclude.

External attributes are same from revealjs-code-block.

.. revealjs-fragments::¶

Note

There are cases not working regular.

Inject fragment attribute into objects. Referer to “Fragments” from Reveal.js

You can see demo to know usage.

:custom-effect: (string)¶: When it is set, inject as custom class. You can customize behavior of fragments transitions with CSS.

Example:

Write block as directive that you want to present as fragments.

.. revealjs-fragments::

   * First
   * Second
   * Third

.. revealjs-notes::¶

When you write this section, inner text are as content of Speaker View.

If you write some directives on same-level, Reveal.js uses first direcrive only.

Note

You must be careful for comment block when you set revealjs_notes_from_comments in conf.py. Reveal.js recoginzes first <aside> element as content of speaker-view, so you may not see directive content as notes.

Example:

.. revealjs-notes::

   This content output into <aside> element on <section>.

Footnotes

1: Reveal.js plugins use data- attributes often to customize behavior.
2: Pleas see Reveal.js document to know about this.