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 presentation 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 directive 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 directive 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 directive only.

Note

You must be careful for comment block when you set revealjs_notes_from_comments in conf.py. Reveal.js recognizes 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