Source Code

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 (light)
• Solarized Dark: Solarized (dark)
• Inspired GitHub: InspiredGitHub
• Ocean Light: base16-ocean.light
• Ocean Dark: base16-ocean.dark
• Eighties Dark: base16-eighties.dark
• Mocha: base16-mocha.dark

While there's always a theme that matches the currently selected slide type, you can still override this by using the theme attribute:

:: theme: Solarized (dark)

Another example:

:: 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"
• "Deprecated"
• "Never Do this"
• "Wrong Way"
• "Right Way"

You can set a label via the label key:

:: 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: