Let Your Code Do The Talking

Today I’m excited to introduce a new GitPitch feature that supercharges the presentation of code within slides using nothing more than plain Markdown. This new feature is called code-presenting.

You’ll soon see how you can use code-presenting to effectively step-through both static-code blocks or the complete source-code of any file within your git repo, line-by-line or section-by-section from directly within your GitPitch presentation.

Code-Presenting Preview

To give a quick idea what GitPitch code-presenting is all about, take a look at the following screen-capture of code-presenting in-action on a single slide within a GitPitch presentation:

GitPitch Code Presenting — Step-Thru Code Without An IDE!

Activated using standard slideshow navigations, code-presenting reveals a sequence of code-fragments. When revealed, a code-fragment is given sharp-focus while the surrounding code is automatically blurred. This means you and your audience can now enjoy distraction-free code-presenting within GitPitch.

Code-Presenting Live

To see GitPitch code-presenting live take a minute to look through the following sample presentation. I’ll wait right here until you get back:

[ GitPitch ] gitpitch/code-presenting/master

If you viewed the sample presentation you will have seen code, taken from both static-code blocks and source-code from files within the git repo, being presented directly within the online presentation. And of course, code-presenting works for GitPitch offline presentations too.

Code-Presenting From Repo Source

In preparation for the release of code-presenting I recently added support for a new code slide-delimiter. This new slide delimiter allows you to automatically load code from any file within your repo directly into a code-block on any slide within your presentation.

The new code delimiter syntax is simple, it just takes a relative path to any source file within your repo:

---?code=path/to/source.file

Any slide on which this new code delimiter has been set will automatically render a Markdown code-block. The contents of this code-block will be the contents of the file specified on the delimiter.

For example, assume the file src/main.go is found within your repo with the following content:

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

Using the new code slide-delimiter, you can automatically convert the contents of this file into a code-block within a slide in your presentation with just one line of markdown in your PITCHME.md:

---?code=src/main.go

This code-block is then rendered by GitPitch as follows:

GitPitch Code Block With Automatic Syntax Highlighting

This new delimiter makes it simple to load any file, regardless of programming language, into any slide in your GitPitch presentations.

This also means that you no longer need to copy-and-paste code into your PITCHME.md if it already exists within your repo. As an added bonus, when you change source files in your repo, the source code shown in your presentation is automatically updated too.

Code-Presenting Markdown Syntax

The markdown syntax used to activate code-presenting within your PITCHME.md is described in detail on the GitPitch Wiki here. For this blog post we are going to learn-by-example, using a simple syntax called a code-fragment marker, or CF-marker.

Let’s start by pasting the contents of the aforementioned src/main.go file into a standard Markdown code-block on a slide within a PITCHME.md:

---
```
package main
import "fmt"
func main() {
    fmt.Println("Hello, world!")
}
```
@[1]
@[3]
@[5-7]

As you can see, the code-block itself is a standard Markdown code-block. CF-markers appear directly below code-blocks. Each CF-marker takes the form @[fragment-range-of-lines]. In this example, there are three CF-markers:

1. The first CF-marker, @[1], will cause line #1 (the package statement) within the code-block to become a highlighted code-fragment.
2. The second CF-marker, @[3], will cause line #3 (the import statement) to become a highlighted code-fragment.
3. The third CF-marker, @[5-7], will cause lines 5-through-7 (the entire main function) to become a highlighted code-fragment within the code-block.

We could have saved ourselves the effort of copying this code into our PITCHME.md by using the the new code slide-delimiter in conjunction with CF-markers to achieve the same result as follows:

---?code=src/main.go
@[1]
@[3]
@[5-7]

If you opened this presentation, code-presenting would render the highlighted code-fragments as follows:

GitPitch Code Presenting — Step-Thru Code Without An IDE!

As you can see, code-presenting is a simple yet powerful tool that lets you focus on the code you care about directly within any GitPitch presentation.

Code-Presenting Speaker-Notes For Code

The CF-marker syntax also supports code-presenting with 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.

Code-Presenting Simplicity-By-Design

Often, as developers, the best way to describe our code is to let our code speak for itself. And for many office, meetup or conference audiences, the following mantra is a common refrain:

Now with the introduction of GitPitch code-presenting, showing your code enjoys first-class feature support directly within any slideshow presentation. And in keeping with the overriding GitPitch philosophy of simplicity-by-design, code-presenting requires no sign-up, and there is absolutely nothing to install. It just works ;)

Thanks for reading along today. For more news, tips and cool creations from the GitPitch community, follow me right here on Medium or on Twitter @gitpitch.

Hacker Noon is how hackers start their afternoons. We’re a part of the @AMI family. We are now accepting submissions and happy to discuss advertising & sponsorship opportunities.

If you enjoyed this story, we recommend reading our latest tech stories and trending tech stories. Until next time, don’t take the realities of the world for granted!