Special elements

In addition to the elements with a dedicated markup, attributes can be used to define more elements, such as boxes, subslips, carousel, …

This page provides a reference for all such elements.

Boxes, admonitions and math environments

The following boxes are available:

• block to display a regular presentation block,

• theorem to display a theorem,

• definition to display a definition,

• example to display an example,

• lemma to display a lemma,

• corollary to display a corollary,

• remark to display a remark.

• proof to display a proof.

To create an element listed above, add its name as a class to the block element. Any box may additionally have a title=... attribute. This attribute cannot yet contain any markup.

Editor

Presentation

Both

⛶

{.block} I'm a block. I could have a title too, if I wanted to. {.definition} This is a definition {.theorem title="Fundamental theorem of definition"} The definition is interesting {.proof} > Suppose it's not interesting. > > Then it would not have a proof.

Slips and slides

A slip element is an element with a fixed width (equal to the presentation width) but no fixed height. By default, the whole presentation is in a slip.

So a slip has a number of pixel defining its width (1440 by default, as presentations are 1440x1080 pixels). If the available width for the slip element is different, it will be rescaled to fit it: the pixels change in size, but you still have the same number.

You can enter a slip with the eponymous action. This zooms on the top part of it.

Slide are just like slips, but they also have a fixed height.

To create a slip or a slide, just give the element the slip or slide attribute. This will automatically add a enter action, unless there is already one or the no-enter is used.

Editor

Presentation

Both

⛶

Let's have three parts in this presentation: {style=display:flex} > {slip} > --- > # Part 1 > > This is the part 1 > > {slip no-enter} > --- > # Part 2 > > This is the part 2. It is skipped due to `no-enter` > > {slip} > --- > # Part 3 > > This is the part 3. {step}

Carousels

Carousels are elements that only display one child at a time. They allow to conveniently change the displayed content of an element, for instance the pages of a PDF. In particular, they are very adapted when you have multiple images, each adding some content to the previous one.

A carousel is created simply by giving it a carousel attribute. Carousels are then controlled with the change-page action.

Editor

Presentation

Both

⛶

Here is a first carousel: {carousel change-page=~n:all} ---- A --- B --- C ----

Carousel will take the height of their current displayed element, unless the carousel-fixed-size class is added to the carousel. In which case, it takes the height of the tallest element.

Includes for Markdown and HTML

Includes are a way to include external markdown/HTML files, just as if they were inlined in the file, similar to the ![](...) syntax but for blocks. An include must be a standalone attribute. It must have the include boolean attribute and src="path/to/file.md" key-value attribute. It is possible to add other attributes as well.

This presentation has two part:

{include slip src="part1.md"}

{include slip src="part2.md"}

{include src="conclusion.html"}

{include src="drawing.svg"}

Recall that for inline elements, it is possible images, SVGs, videos, audios, PDFs, HTML files and drawings using the markdown image syntax:

This sentence includes ![](file.html) some raw html from an external file.

Blockquotes

Since > is used for Using >, we can create them by assigning the blockquote attribute.

{blockquote}
This is a blockquote.

{blockquote}
> This is a blockquote.
>
> With multiple paragraphs.

> This is NOT a blockquote.
>
> Even with multiple paragraphs.

HTML spans and blocks

While Markdown conveniently allows to inline some HTML, the rules for it are not obvious. If you want to be sure that some content is included as html, you can use use code block and code spans, with the as-html attribute.

{as-html}
```
<marquee>This is included as html, not as a code block</marquee>
```

This text includes `<blink>some html</blink>`{as-html}.

For consistency, it is alternatively possible to give a code block the =html language:

```=html
<marquee>This is included as html, not as a code block</marquee>
```