# 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 PITCHME.md 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

@[25-29](Init Spark cluster data source)


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:

@[fragment-range]


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:

@[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]


The following example shows a sample code-block from a PITCHME.md 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:

@[1]
@[3]
@[5-7]


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 PITCHME.md.

#### 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.