Part 5 Presentations

Ravi Rajani

asciidoctor-html has a presentation mode in which a chapter is displayed as a slide deck. To render a chapter in presentation mode by default, use the document property :pagestyle: presentation.

You can make elements without an ID appear in just presentation (resp. “handout”) mode using the presentation-only (resp. presentation-hidden) roles.

Outline

Multi-Column Layout

•

A section with an ID attribute starts a new slide.
•

A subsequent section without an ID is displayed in a new column to the right if the screen is large enough.

Use the {notitle} variable in the section heading if you do not want to display a separate title for a column.

Live Attribute

Any source code, (un)ordered list, table, description list, or subnav block supports a live attribute which allows the presenter to step through the “lines”. The attribute value is of the form $initial-$live where $initial is one of normal, faded or covered, and $live is one of faded or covered.

For example, the list in the right column has live=covered-covered. Repeatedly press the n button to uncover each line one at a time.

Covered List Demo

•

You just uncovered me with the n (for next) key!
•

Now try uncovering the next line by pressing 3.
•
You can toggle any line by pressing the numeric key corresponding to its line number. E.g., try pressing 2, and then press n again.
- ‐
  
  Uncovering works as expected with nested lists. Press b a couple of times to move back. Then move beyond this line with the n key.
•

Once you’ve reached the end of the list, pressing n again uncovers the first line of the next live block on the current slide, or if there is no such line, flips to the next slide.

Keyboard Navigation

	Move to the previous/next slide.
	Scroll the active slide down/up.
`B` `N`	Move to the previous/next live block or the previous/next slide.
`b` `n`	Reveal the previous/next line of the active live block or move to the previous/next live block or slide.
`1` to `9` `0`	Toggle line numbers 1 to 10 (`0` for 10) of the active live block.
`r`	Reset the active live block to its initial state.
`R`	Reset all live blocks on the active slide to their initial state.
`esc` `q`	Exit presentation mode and enter the multipage reading view.

Set the hfill role on the section to make it occupy the maximal amount of horizontal space.

Live Code Demos

The following pseudocode list has live=normal-faded.

1
reverse$(x[1:n])$:
1. 2
  for $i \gets 1$ to $\lfloor n/2\rfloor$:
  1. 3
    
    $\textit{tmp}\gets x[i]$
  2. 4
    
    $x[i]\gets x[n-i+1]$
  3. 5
    
    $x[n - i + 1]\gets \textit{tmp}$

The Python listing below has the linenums option enabled and live=faded-faded.

def reverse(x):
    """Reverses list x in place"""
    n = len(x)
    for i in range(n // 2):
        tmp = x[i]
        x[i] = x[n - i - 1]
        x[n - i - 1] = tmp

Live SVGs

SVGs can be made “live” by:

•

loading them with the image macro using the inline option and the live attribute;
•

adding data-line-number=$number attributes to any svg group elements that should be (un)coverable.

Use Inkscape to organise your SVG into layers and label the layers that you want uncovered as layer $n where $n corresponds to the order in which you want that layer to appear. Then use SVGO with this configuration to create a “live” SVG with data-line-number=$n attributes inserted on the corresponding layer elements.

Live demo of Newton’s method
(live=covered-covered)

Jupyter Cells

Enable the jupyter option on a listing to generate a Jupyter REPL that runs in the browser with Pyodide. The listing’s width and height attribute will control the cell size, and the prompt-position attribute can be one of top (default), left, bottom, or right.

This will only work if repl_url is set in config.yml.

The End

Thank you