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.
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
animate. All the other attributes are particular to their elements, such as lists
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%
:: size: 150 # Hello World
Set the image size to 50%
:: size: 50 ![image](image.png)
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.
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
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
Here's a table of all the possible animations and their options for the
|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|
And here's a short video that shows all the animations seen above: