Source Code


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

Progressive Disclosure

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: