Code Presenting

Code presenting lets you focus-on and step-through specific code snippets, loops, functions, output, etc. from directly within your slideshow. For live presentations this can mean the end of switching back-and-forth between your presentation slides and your IDE.

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

Learn By Example

The following markdown snippet uses a gist delimiter to inject code onto the slide. The @[-] syntax that follows the delimiter activates code-presenting for that code:

---?gist=onetapbeyond/494e0fecaf0d6a2aa2acadfb8eb9d6e8&lang=Scala&title=GIST: Scala Snippet

@snap[south span-100]
@[25-29](Init Spark cluster data source)
@[41-53](Build RDD[AWSTask] from source)
@[57-62](Delegate RDD[AWSTask] to AWS Lambda)

Tip! For best results, always snap code annotations to the south position on your slide.

Results in the rendering of the following slide(s):


Click on the above image to experience code-presenting within a live GitPitch presentation.

Code presenting generates a sequence of distinct code-fragments. Each step displaying a new code-fragment is activated using standard slideshow next-navigations. When revealed, a code-fragment is given sharp-focus while the surrounding code is automatically blurred.

This approach delivers distraction-free code-presenting for you and your audience.

Code Presenting Syntax

Code-fragment (CF) marker syntax is used to activate code-presenting within a slide.

CF-markers can be used on any slide where a fenced code block, code delimiter, or gist delimiter has been used. Each CF-marker you add to your slide causes one-or-more lines of code to be treated as a distinct code fragment.

To define a single code fragment use the following syntax:


Note, spaces can not appear in your markdown before the opening @ in a valid CF-marker.

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

For example, to identify a range for highlighting just the first line appearing in a code-block use the following syntax:


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


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

@[3, 5-7, 9]

The following example shows a sample code-block from a file.

package main

import "fmt"

func main() {
    fmt.Println("Hello, world!")

This code-block could be followed by a number of CF-markers in your markdown as shown here:


Your CF-markers are automatically converted into slide-fragments that you can step-through, similar to how you might step-through code in your IDE.

The following animation shows how the code-block for this example is then rendered on the slide:


As you navigate through your presentation each slide fragment - a block of code in focus - is revealed in the order specified by the CF-markers in your

Code Presenting With Annotations Syntax

The CF-marker syntax also supports code-presenting with custom annotations. You can think of this feature as speaker-notes-for-code.

Annotations are optional. An annotation can be associated with any CF-marker. For example:

@[1](Go package main for executable command)

If an annotation is associated with a CF-marker then that annotation is automatically rendered on the slide, directly below the code-block when the highlighted code-fragment is in focus. Annotations can be used to draw attention to key points relating to the highlighted code.