Live Code Presenting



Live code presenting can be activated for any code block on any slide - whether the code originated as a fenced code-block, a source code file, or a GitHub GIST.


Introducing Live Code Presenting

Live code presenting lets you focus-on and step-through code directly on your slides. This feature lets you demonstrate code flow control, initialization, looping, function calls, and more. All without ever having to leave your slide deck.

If you are a conference speaker or training instructor Live Code Presenting can mean no more switching back-and-forth between your presentation slides and your IDE!


Live Code Presenting Example

Live code presenting can be activated on any code slide using a live code fragment syntax. The following example demonstrates the use of code-fragments to activate live code presenting on a sample fenced code block:


    ---

    @snap[north-east span-100 text-06 text-gray]
    Live Code Presenting
    @snapend

    ```js
    var io = require('socket.io')(80);
    var cfg = require('./config.json');
    var tw = require('node-tweet-stream')(cfg);

    tw.track('socket.io');
    tw.track('javascript');

    tw.on('tweet', function(tweet){
      io.emit('tweet', tweet);
    });
    ```

    @[1]
    @[2,3]
    @[5-10]

Results in the rendering of the following slide:

CODE-PRESENTING-SIMPLE

To understand this markdown snippet, see the live code fragment syntax description.


Live Code Presenting Example with Annotations

Annotations are a feature of live code presenting that let you display additional context on your slide for each individual code-fragment. See live code fragment syntax for details. The following example demonstrates the use of code-fragments with annotations for a sample source code file:


---?code=src/sample/tweet-io.js&lang=js

@snap[north-east span-100 text-06 text-gray]
Live Code Presenting with Annotations                         
@snapend

@snap[south span-100]
@[1](Socket.IO enables real-time, bidirectional, event-based communication.)
@[2,3](Tweet Stream is node module that connects to the public twitter stream.)
@[5-10](To process interesting Tweets, simply register a custom handler.)
@snapend

Results in the rendering of the following slide:

CODE-PRESENTING-ANNOTATIONS

Tip! For best results, always Snap your Code Annotations to the south-position on your slides.

To understand this markdown snippet, see the live code fragment syntax description.


Live Code Presenting Example with Pro Code Zoom

The following sample slide demonstrates live code presenting with Pro Code Zoom.

CODE-PRESENTING-CODE-ZOOM

This sample slide provides a quick introduction to Live Code Presenting with Code ZOOM. To learn about the full set of Code ZOOM features see the Pro Code Zoom Guide.


Live Code Presenting Fragment Syntax

Live code presenting fragments allow you to step-into code on your slides using standard slideshow navigation. Each code-fragment is given sharp-focus while surrounding code is automatically blurred.

The basic code-fragment syntax is as follows:

@[fragment-range]

Where fragment-range identifies a range of one or more line numbers within the code-block that you want focused-and-highlighted on the slide.

For example, to identify just the first line in a code-block as a fragment-range use:

@[1]

To identify a multi-line fragment-range covering the second, third, and fourth lines in a code-block use the following syntax:

@[2-4]

To identify two or more non-contiguous slices of code within a single fragment-range, use the following syntax:

@[3,5-7,9]

An optional annotation can be added to any code-fragment as follows:

@[3-6,9](Your custom message for display while fragment is visible goes here.)

It is strongly recommended that you use Snap Layouts to snap code-fragments with annotations to the south-position on your slides as follows:

@snap[south span-100]
@[3-6,9](Your custom message for display while fragment is visible goes here.)
@snapend

Snapping code-fragments with annotations to the south-position on your slides ensures you make optimal use of the space on any slide that is simultaneously displaying code and related annotations.