Attributes
Presentation Markdown differentiates itself from normal Markdown through the introduction of small additions to accomodate presentations, such as animations. One addition is the ability to insert presenter notes , the other is the ability to customize elements - such as lists - via attributes.
Attributes always go before an element preceded by a ::
(with the exception of slides). For example, to tell a headline that it should have a font size of 200%, you'd enter the following markdown:
:: size: 200
# I am a Headline
The syntax is always the same. If you have more than one attribute to set, you just separate the attributes by a comma. For example, if you want to disable animations and set the font size to 50% for a headline, you'd enter:
:: size: 50, animate: off
# I am another headline
Similarly, if you want to change the font of a headline and a paragraph on your slide, you'd write:
:: size: 200
# Observe the headline
:: size: 200
Now observe the paragraph of beautiful text, written to awe and impress the audience.
General Attributes
There're two attributes that are general for all elements. This means that each element in Presentation Markdown (say a Headline or a List) can use these attributes. These attributes are size
and animate
. All the other attributes are particular to their elements, such as lists
, quotes
, slides
or tables
.
Size
The first one is the size
attribute. It allows to change the size with which the element is displayed on the slide. This works for headlines, images, even for source code or tables.
The default value is 100
. Anything smaller than 100
makes the element smaller, anything bigger than 100
makes the element bigger.
Set the headline size to 150%
Syntax
:: size: 150
# Hello World
Set the image size to 50%
:: size: 50
![image](image.png)
Animation
The other general attribute is the animate
attribute. It allows you to add a move in animation to an element. This animation is used when the element enters the slide. This attribute has many different settings, based on the animation you'd want to set up. Thankfully, Hyperdeck has nice Inspectors
to greatly simplify this.
Syntax
A simple fade in
animation that takes 1.0
seconds looks like this:
:: animate: (1.00; fade)
# I am a headline that fades in
The animation keyword is animate
and is followed by parentheses with 2-3 parameters. In this case the first parameter is the duration of 1.0
seconds, the second is the name of the animation of fade
.
If we want to have an animation where the element is very small in the beginning and then scales up to its actual size, we'd use the following syntax:
:: animate: (1.0; scale; bigger)
# I am a headline that scales in
Note that we added an additional parameter which defines the direction of scale. If you want the element to start in very big and then scale down, you'd write
:: animate: (1.0; scale; smaller)
# I am a headline that scales in
Overview
Here's a table of all the possible animations and their options for the animate
key:
Key | Options | Description |
---|---|---|
off | / | No animation |
fade | / | Fade in |
move | left / right / top / bottom | Move into the slide |
scale | bigger / smaller | Scale up or down into the slide |
fall | / | Fall into the slide from above |
Animation Video
And here's a short video that shows all the animations seen above: