Right Arrow
or Space
Left Arrow
Home
End
Esc
S
F
Alt + Click
E
Inline code: variable
Code block:
porridge <span style="color:#000;font-weight:bold">=</span> <span style="color:#d14">"blueberry"</span>
<span style="color:#000;font-weight:bold">if</span> porridge <span style="color:#000;font-weight:bold">==</span> <span style="color:#d14">"blueberry"</span>:
<span style="color:#000;font-weight:bold">print</span>(<span style="color:#d14">"Eating..."</span>)
In-line math: x+y=z
Block math:
f(x)=;2(x+4)(x−4)(x+4)(x+1)
Make content appear incrementally
{{% fragment %}} One {{% /fragment %}}
{{% fragment %}} **Two** {{% /fragment %}}
{{% fragment %}} Three {{% /fragment %}}
Press Space
to play!
One Two Three
A fragment can accept two optional parameters:
class
: use a custom style (requires definition in custom CSS)weight
: sets the order in which a fragment appearsAdd speaker notes to your presentation
{{% speaker_note %}}
<span style="color:#000;font-weight:bold">-</span> Only the speaker can read these notes
<span style="color:#000;font-weight:bold">-</span> Press <span style="color:#d14">`S`</span> key to view
{{% /speaker_note %}}
Press the S
key to view the speaker notes!
Customize the slide style and background
{{< <span style="color:#000080">slide</span> <span style="color:#008080">background-image</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"/media/boards.jpg"</span> >}}
{{< <span style="color:#000080">slide</span> <span style="color:#008080">background-color</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"#0000FF"</span> >}}
{{< <span style="color:#000080">slide</span> <span style="color:#008080">class</span><span style="color:#000;font-weight:bold">=</span><span style="color:#d14">"my-style"</span> >}}
Let’s make headers navy colored.
Create assets/css/reveal_custom.css
with:
.<span style="color:#458;font-weight:bold">reveal</span> <span style="color:#000080">section</span> <span style="color:#000080">h1</span><span style="color:#000;font-weight:bold">,</span>
.<span style="color:#458;font-weight:bold">reveal</span> <span style="color:#000080">section</span> <span style="color:#000080">h2</span><span style="color:#000;font-weight:bold">,</span>
.<span style="color:#458;font-weight:bold">reveal</span> <span style="color:#000080">section</span> <span style="color:#000080">h3</span> {
<span style="color:#000;font-weight:bold">color</span>: <span style="color:#000;font-weight:bold">navy</span>;
}