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.