Present real code.

Paste real code, pick a language and theme, and Slides handles the highlighting. Walk your audience through it line by line, and let every change animate into place. Click through the deck below to see it in action.

Get started Read the code block guide

From snippet to stage

  1. Add a code block

    Insert a Code block on any slide and type or paste your code.

  2. Pick a language and theme

    Highlighting updates as you type, for every language highlight.js supports.

  3. Highlight what matters

    Turn on line numbers and highlight the lines you want people to focus on.

  4. Animate each step

    Duplicate the slide, change the code, and Auto-animate moves it from one version to the next.

Sharp from the back row.

Screenshots blur on a projector and go stale the moment the code changes. A code block stays crisp at any size, keeps its syntax highlighting, and is easy to update right up to the talk.

Pick a highlighting theme that suits your deck, then style the rest of the slide with the same care as any other slide.

Built for technical talks

  • Line highlights

    Draw the eye to the lines you're talking about with comma-separated lines and ranges. How it works.

  • Animated code changes

    Auto-animate transitions code between slides, so refactors and diffs are easy to follow.

  • Step-by-step reveals

    Use fragments to bring in explanations, callouts and output one click at a time.

  • Your styles, your markup

    Fine-tune the look with custom CSS, or drop down to HTML when you need it.

  • Live demos on the slide

    Embed a running app, a playground or docs page instead of switching windows mid-talk.

  • Start from Markdown

    Fenced code blocks keep their highlighting when you convert Markdown to slides.

Which programming languages are supported?

Syntax highlighting is powered by highlight.js, so Slides supports the languages in the highlight.js library, from JavaScript and Python to SQL, Rust and shell scripts.

Can I highlight specific lines of code?

Yes. Enter lines and ranges separated by commas, such as 1,4,10 or 2,5-15, and turn line numbers on or off in the block toolbar.

How do I animate code between slides?

Turn on Auto-animate for a slide, duplicate it, and edit the code on the copy. Slides animates the change when you present.

Can I present my code offline?

Yes. Export to HTML keeps the highlighting and animations and runs without a connection. HTML export is available on paid plans.

Ship your next tech talk.

Get started Explore developer features