In addition to the attributes listed here, there're also General attributes, that apply to all elements
Hyperdeck has attributes that allow you to define how your source code should look like:
Each block of source code on a Hyperdeck slide can be rendered in a different source code theme. The background color of the theme is usually provided by the selected Slide Type and Theme
. However, you can always use the default Code Theme background via the
override_bg attribute (see below).
Hyperdeck currently ships with the following code themes (see the theme keyword after the colon)
- Solarized Light:
- Solarized Dark:
- Inspired GitHub:
- Ocean Light:
- Ocean Dark:
- Eighties Dark:
While there's always a theme that matches the currently selected slide type, you can still override this by using the
:: theme: Solarized (dark)
:: theme: base16-ocean.dark
A source code block can have an additional label which gives more information about the code in question. Useful examples for this are label texts such as:
- "New Syntax"
- "New in Version 3"
- "Never Do this"
- "Wrong Way"
- "Right Way"
You can set a label via the
:: label: "☝️ There's a better way"
The label will always be displayed in the top right corner. Here's an example:
You can force the displaying or hiding of a background rectangle behind the code. The color of this background is provided by the theme:
:: override_bg: true
Sometimes you have multiple lines of code that you don't want to appear at once. Instead, you'd like to progressively disclose them. However, duplicating your slide 5 times and adding one more line on each slide becomes cumbersome quickly. Hyperdeck allows you to set special numbered symbols into your source code. Lines with a symbol are animated in after the lines without symbols. Here's an example:
The bottom bar gives you the option to quickly insert these special number symbols ❶ - ❾. The numbers will not appear on your slides.
Finally, here's what the code looks like for the progressive disclosure video above: