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.

See the following slide deck for a live, interactive demonstration of boxed-text rendered on slides, click here.


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

See the following slide deck for a live, interactive demonstration of styled-quotes rendered on slides, click here.


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.


Image Widget

The Image Widget renders inline images with custom styles on your slide. Standard markdown image syntax provides a simple mechanism to render an inline image on any slide, for example:

![PIC](assets/img/cityscape.png)

This markdown snippet renders as follows:

The standard image syntax used above does not permit the activation of custom styles for the image. By default, an image will be rendered using the default style rules determined by the fixed theme activated for your presentation. An inline image will also be scaled automatically to fill the available space on your slide.

The @img tag is a special shortcut syntax that can be used to render-and-style individual images on your slides. Using this shortcut syntax we can replace the standard markdown image syntax from above as follows:

@img[](assets/img/cityscape.png)

This markdown snippet renders as follows:

At this point we have simply substituted the standard syntax with the new shortcut syntax. But we have not yet taken advantage of the styling capabilities of the new syntax. Let’s do that now.

For example, we can see that in the example above, the fixed theme has added a solid-border and box-shadow around our image. Let us define our own CSS style rule to remove these embellishments:

.reveal img.clean-img {
  border: none;
  box-shadow: none;
  background: none;
}

We can immediately activate our new clean-img class using the @img tag as follows:

@img[clean-img span-60](assets/img/cityscape.png)

Note, we have also used the built-in span-60 class to constrain the width of the image on our slide. This span style is one of the available CSS utility styles available out-of-the-box to all GitPitch presentation authors. This markdown snippet renders as follows:

At this point we have activated two different CSS style rules for our image, the clean-img and span-60 classes respectively. There are no limits to the number of custom style rules you can activate for your image.

As a final step, we can define a further custom CSS style rule that will allow us to clip the image, as follows:

.reveal img.clip-img {
  clip-path: circle(30% at 50% 50%);
  -webkit-clip-path: circle(30% at 50% 50%);
}

The updated markdown for our slide is as follows:

@img[clip-img bg-black clean-img span-80](assets/img/cityscape.png)

Note, we have also used the built-in bg-black class to inject a black background behind our transparent PNG image. The final slide renders as follows:

While the @img tag offers unlimited flexibility for styling individual images, do keep in mind that you also have the ability to define a global CSS style rule for all images that be activated automatically on every slide. For example, to activate the clean-img rule globally for your slideshow presentation use the following custom CSS rule:

.reveal img {
  border: none;
  box-shadow: none;
  background: none;
}

You can learn more about customizing your slideshow using CSS style rules in the custom themes 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.