Pro Code Widgets



GitPitch Pro + Lite subscriptions activate powerful Pro syntax shortcuts supported by PITCHME.md markdown that can be used to generate rich visual components - aka. widgets - on any slide.

The Code Widget and GitHub GIST Widget support a number of powerful extensions beyond standard code presenting. This guide introduces these markdown widgets.


Code Widget

The Code Widget renders source code from any file onto your slide. All paths are relative to the root directory of your local working directory or repository. The widget is created using the following @code syntax in your PITCHME.md markdown file:

@code[lang-hint ...](path/to/file.ext)

The lang-hint must be specified as the first property on this widget. The list of supported languages and valid aliases that can be used as a lang-hint can be found here.

Important! The lang-hint property has two important uses:

  1. It ensures the code on your slide is rendered using the most appropriate syntax highlighting style.
  2. It also ensures that any markup in your code is properly escaped before being rendered as slide content in the browser. This is especially important when presenting HTML, XML, PHP, React snippets etc.

For example, the following markdown snippet uses the @code widget to render a sample Go source file:

@code[golang](src/go/sample.go)

This markdown snippet renders as follows:

PRO-CODE-WIDGET

At first glance this widget may seem to deliver no special benefits over using inline fenced code blocks or a code delimiter on your slide. But the @code widget is the basic mechanism by which the following powerful Pro code features are activated:

As expected, the @code widget works seamlessly with traditional GitPitch code presenting with annotations. For example:


@code[golang](src/go/sample.go)

@[1](You can step through your code directly within your slide deck.)
@[3](Using the GitPitch live code presenting with annotations feature.)
@[5-7](Which means no need to switch back and forth between your slide deck and IDE.)



GitHub GIST Widget

The GitHub GIST Widget renders source code from any GitHub GIST directly onto your slide. This features is available to all presentations whether hosted on GitHub, GitLab, or Bitbucket. The widget is created using the following @gist syntax in your PITCHME.md markdown file:

@gist[lang-hint ...](username/gist)

The lang-hint must be specified as the first property on this widget. The list of supported languages and valid aliases that can be used as a lang-hint can be found here.

Important! The lang-hint property has two important uses:

  1. It ensures the code on your slide is rendered using the most appropriate syntax highlighting style.
  2. It also ensures that any markup in your code is properly escaped before being rendered as slide content in the browser. This is especially important when presenting HTML, XML, PHP, React snippets etc.

For example, the following markdown snippet uses the @gist widget to render a sample Groovy source file:

@gist[groovy](onetapbeyond/8da53731fd54bab9d5c6)

This markdown snippet renders as follows:

PRO-GIST-WIDGET

At first glance this widget may seem to deliver no special benefits over using inline fenced code blocks or a gist delimiter on your slide. But the @gist widget is the basic mechanism by which the following powerful Pro code features are activated:

As expected, the @gist widget works seamlessly with traditional GitPitch code presenting with annotations. For example:


@gist[groovy](onetapbeyond/8da53731fd54bab9d5c6)

@[1](You can step through your code directly within your slide deck.)
@[3](Using the GitPitch live code presenting with annotations feature.)
@[5-7](Which means no need to switch back and forth between your slide deck and IDE.)