Quick answer: A code slide displays a piece of code in a technical talk. The audience is listening while glancing at the screen, so the code must be short, readable, and directed at a single point.

The rules

  1. One snippet per slide. A snippet demonstrates one concept.
  2. A monospace font. The code uses a fixed-width font, sized so it's readable at the back.
  3. Syntax highlighting. A simple, high-contrast theme; the language clearly identified.
  4. The focus line. The relevant line is highlighted; the rest is quiet.
  5. Few lines per slide. Around 5–12 lines of code, and rarely more.

The snippet length

The slide is not the codebase. A snippet that scrolls or wraps is a failed slide. If the code requires more than 12 lines, split it across two slides:

  • The first slide shows the structure or the input.
  • The second slide shows the new code or the output.

The highlight

A colored panel behind the one line, or a change in brightness, directs the eye. The audience should know which line the speaker is talking about before the words are spoken.

The diff slide

When presenting a change, the diff is the strongest form:

  • The removed line is red and quiet.
  • The added line is green and highlighted.
  • The diff tells the story without a full code review.

The terminal slide

Terminal output is treated like code:

  • A fixed-width terminal block.
  • The command and the output.
  • The relevant output highlighted.

The backup

  • A live demo should have a recording or a screenshot fallback. The code slides can be the backup.
  • The code in the deck must be the current code; an outdated snippet is a credibility loss in a technical talk.

The theme

  • A light or dark code theme that matches the deck's palette.
  • The code block has padding; the text shouldn't hug the edges.
  • Line numbers are optional; they help refer to a line in the talk.

What to avoid

  • A full file pasted on a slide.
  • A 6-point font that only the presenter can read.
  • Rainbow syntax highlighting that distracts.
  • The code on the slide different from the code in the demo.
  • Reading the code line by line; explain the why.

Frequently asked questions

How many lines per slide? About 5–12; split when longer. Do I need syntax highlighting? It helps; the language and the key line are clearer. Can the audience copy the code? The slides and the repo are shared after the talk; the live slide is for the point. What if the code includes a secret? Replace the real key with a placeholder; check the deck before sharing.

Show the minimum code that makes the point, and mark the one line that proves it.

Related guide: the slide design guide.