Best tips and resources for making code look good on your tech talk slides?


#1

Earlier today two of my friends shared the resources below as ways to get your code on slides.

What other resources and tips would you recommend for making your code look good on slides on a tech talk, like with pacing, organizing code for your slides, tools, etc?

Bringing code over to your slides with syntax highlighting:


Go Present, a built-in tool for making Go slide shows:


#2

Also https://twitter.com/StabbyCutyou/status/998305026807336962


#3

I’d suggest using as little code as possible. Code looks like line noise on slides and are often perceived as a distraction.


#4

I try to avoid having much text on slides in general. It divides the audience’s attention between trying to read what’s on the slide and trying to listen to what I’m saying. I think this goes double for code. Some rules of thumb:

  • Only a few lines of code on each slide (3-5 max)
  • Make the code large, so it’s easy to read
  • Simplify as much as possible to make it quick to see what’s going on. The longer the audience will spend just reading the code, the longer they will not be paying attention to the talk
  • Use color and typography to highlight the parts of the code that you’re showing.
    • Use color-blindness friendly colors, and use typography in addition to color, so if you’re going to mark something as important make it bold and bright, not just bright
  • One “idea” per slide. If you’re going to talk through multiple things in one block of code, have multiple slides, all with the same code, but different parts highlighted as you’ll talk about them
    • Eg. “This is the return type of this function (return type highlighted), as you can see it’s a generic sequence” (next slide) “And here’s the yield call (yield call highlighted), which returns one element of the sequence per pass through the loop”

#5

I’d like to second this. I find a lot of speakers spend a lot of effort trying to get IDE-like syntax highlighting into presentations. My experience is that you want the opposite. Syntax highlighting distracts from slides. It implies that the important information is which words are variables and which are keywords (and there’s not even a consistent standard for which colors mean what). That’s useful when you’re programming, but it is almost never the point of a slide. Use color/typography to highlight the piece of the code you’re discussing, and create separate slides that highlight different sections as you move through the code.


#6

I’ll give a quick shout-out to Deckset (https://www.deckset.com/), which does automatic highlighting and auto-scaling to fit the code. And its simple use of Markdown for slide creation makes it quicker and easier than almost anything else, I think.


#7

Here’s a great tool that can be helpful when showing code during your talk:

You can create high-rest images and they look really great.

Hope this helps!