Source Code

Source Code


Changing the language

If your cursor is within a code block, the bottom bar offers a button called Language that allows you to choose the language of the code block from a list of all the supported languages in Hyperdeck. You can also search for a language.

You can also just type in the name of the language, so typing in swift will tell Hyperdeck that your code is Swift code, typing in ruby will tell Hyperdeck that your code is Ruby code. The name is always the file extension of the language.

Editing Code

The Code Inspector has multiple attributes which allow you to refine how the table should be displayed in your presentation.


Theme

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

  • Solarized Light
  • Solarized Dark
  • Inspired GitHub
  • Ocean Light
  • Ocean Dark
  • Eighties Dark
  • Mocha
Note

More themes will probably be added in the future. If there is a particular open source theme you really like, send me a note.

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

Note

For Swift Code, the Themes Colors look different than for the other languages. This is because Swift code is highlighted using John Sundell's excellent Splash library, whereas other languages are highlighted using Sublime Text Themes.

Label

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 by entering it into the text field. The label will always be displayed in the top right corner. Here's an example:


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: