Markdown Widgets


GitPitch provides a number of unique syntax shortcuts supported by PITCHME.md markdown that can be used to generate rich visual components - aka. widgets - on any slide.

Note: Markdown Widgets are supported by gitpitch.com , GitPitch Desktop , and GitPitch Enterprise . These widgets are not part of the GitPitch open source project .

Boxed Text Widget

The Boxed Text Widget renders text within a box to let you highlight or emphasize the content on your slide. The widget is created using the following @box syntax in your PITCHME.md markdown file:


@snap[west span-40]
@box[bg-gold text-white rounded box-padding](What is GitPitch?)
@snapend

@snap[east span-50]
@box[bg-green rounded box-padding](A *modern* PowerPoint uniquely adapted for Developers on Git.)
@snapend

This markdown snippet renders as follows:

TEXT-NO-TITLE

The visual appearance of the text and the box itself can be customized as needed. In the above example a number of the built-in CSS utility styles were used to customize the background color, text color, and the rendered-style for the box. In addition, the example also made use of a custom CSS style called box-padding. That custom style was defined as follows:

.box-padding #boxed-text {
  padding-top: 2em;
  padding-bottom: 2em;
}

The box-padding class was used to control the vertical height of the box by overriding the default padding around the text rendered inside the box. Overriding the default padding in this way is entirely optional.

Boxed Text With Title Widget

The Boxed Text-with-Title Widget is a simple extension of the basic Boxed Text Widget . As before, this widget lets you highlight or emphasize text on your slide. Using this widget the box also displays a custom title.

The widget is created using the following @box syntax in your PITCHME.md markdown file:

---?color=black

@snap[north-west span-35]
@box[bg-green text-white box-padding](1. Plan#Lorem ipsum dolor sit amet eiusmod)
@snapend

@snap[north-east span-35]
@box[bg-orange text-white rounded box-padding](2. Build#Sed do eiusmod tempor labore)
@snapend

@snap[south-east span-35]
@box[bg-pink text-white box-padding](3. Measure#Cupidatat non proident sunt in)
@snapend

@snap[south-west span-35]
@box[bg-blue text-white waved box-padding](4. Repeat#Ut enim ad minim veniam prodient)
@snapend

@snap[midpoint]
@fa[refresh fa-3x]
@snapend

This markdown snippet renders as follows:

TEXT-TITLE

Note, the box-with-title syntax depends on a simple convention where a # delimiter is used to separate the title from the text within the @box tag. This syntax convention is generalized as follows:

@box[class...](title # text)

You can also see from the above sample markdown, the @box tag ships with three distinct box rendering styles: the default, rounded, and waved.

The appearance of the text and the box itself can be further customized as needed. In the above example a number of the built-in CSS utility styles were used to customize the background color, text color, and the rendered style for the box. In addition, the example also made use of a custom CSS style called box-padding. That custom style was defined as follows:

.box-padding #boxed-text {
  padding-top: 1.8em;
  padding-bottom: 2.3em;
}

The box-padding class was used to control the vertical height of the box by overriding the default padding around the text rendered inside the box. Overriding the default padding in this way is entirely optional.

Quote Widget

The Quote Widget renders a nicely styled quotation on your slide. The widget is created using the following @quote syntax in your PITCHME.md markdown file:

@snap[north-east span-65]
@quote[Beware of geeks bearing formulas.]
@snapend

This markdown snippet renders as follows:

QUOTE

Quote With Attribution Widget

The Quote With Attribution Widget is a simple extension of the basic Quote Widget . As before, this widget lets render a nicely style quotation on your slide. Using this widget the rendering includes source attribution for the quote.

The widget is created using the following @quote syntax in your PITCHME.md markdown file:

@snap[north-east span-20]
@quote[It's what I do that defines me.](Bruce Wayne)
@snapend

This markdown snippet renders as follows:

QUOTE-ATTRIBUTION

Font Awesome 5 Icon Widget

The Font Awesome 5 Widget renders pixel-perfect icons on your slides. Enjoy up to 2000 beautifully rendered icons for use within any slideshow.

FONTAWESOME

For further details, see the Font Awesome 5 Icons Guide .

The Git Repo Link Widget renders a direct link to any file within your repository on GitHub, GitLab, or Bitbucket in the cloud. The widget is created using the following @gitlink syntax in your PITCHME.md markdown file:

@gitlink[TEXT](path/to/repo/file.ext)

For example, assuming there is an install/README.md file within the same branch as your presentation, you can use the following markdown shortcut syntax to link to that file:

You can find additional documentation @gitlink[here](install/README.md).

This link to your repository in the cloud will automatically open on the same branch as the presentation itself.