Look a squirrel! Logo

Presenting code in Keynote

When it comes to slide design I'm heavily influenced by Zach Holman's Slide Design for Developers; the bigger, the bolder, the brighter, the better! I try to keep text to a minimum, most of the time just two or three BIG words. But with technical talks you're going to need to show code every now and again.

Readability matters

Example slide from very old talk
This is an actual slide from one of my first ever talks. What was I thinking!?

Your audience does not need to see every line of code. Strip away any boilerplate and focus on only the code that's relevant. The code might not be valid, but you don't want the audience being distracted attempting to read reams of code from your slides. If you want to provide the complete code upload it Bitbucket / Github and share the link after your talk.

Syntax highlighting

Put yourself in your audience’s shoes: is this readable? Is this interesting? – Zach Holman

Why do we use editors which provide syntax highlighting? Why isn't everyone coding in TextEdit or Notepad? Because syntax highlighting increases the readability of our code making it easier to understand. This is as true for slides as it is for your code editor.

with and without syntax highlighting
I know which I'd rather try and grok

A common way of achieving this is to use highlight, which in basic terms looks something like:

highlight -O rtf somefile.js | pbcopy

Looks straight forward enough, right? But by the time you add in a couple of configuration options, it starts to look a lot more complicated, and difficult to remember.

highlight -O rtf somefile.js --line-numbers --font-size 16 --font Monaco --style monokai -W -J 50 -j 3 --src-lang javascript | pbcopy

The workflow is also very clumsy. Write some code, save it to a file, switch to terminal, run the command. Any edits to the code would require opening the relevant file again (which is probably named snippet(6).js), making the change, saving the file, switching to terminal, running the command… and I'm bored/frustrated already.

Still this is the way I did it for a long time, I created aliases for light and dark slides, different languages, and so on. But there is a better way; copy-as-rtf

copy as rtf screenshot
view the Atom package

This is an Atom package, but a similar package is available for SublimeText

Now I simply write the code, select the portion that I want and press ⌥+r

Walking through code

walking through a simple example
a clicker and good timing is required

Inevitably if I find that I have to show code in my slides it's because I want to talk through a particular concept and explain what is going on. Sometimes it can be difficult for the audience to know which part of the code you're currently talking about, so I highlight the relevant parts as I speak.

Each highlighted line is a new slide. I duplicate the first slide, select the text that's not currently relevant and drop the opacity to 50%.

thumbnail of slides
even a simple example can take half a dozen slides

This is laborious, but adding code to your slides should be a considered decision. If you do not think it is worth the time emphasizing the relevant code as you speak then there is likely a better way of conveying your message to your audience.

More from Look a squirrel!

🐷 Bacon button

Scotland has a long history of innovation; the first cloned mammal, tractor beams, first Bicycle, first Robot Olympics, Penicillin, et al. Unsurprisingly one of their greatest inventions is the World's...

See Article