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: These Markdown Widgets are supported by gitpitch.com, GitPitch Desktop, and GitPitch Enterprise. This feature is not part of the GitPitch open source project.


1. Render Boxed Text

To render text emphasized within a box on any slide you can use the following shortcut syntax in your PITCHME.md markdown file:

---?color=#F6D365

@box[bg-orange text-white rounded demo-box-pad](Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.)

This markdown snippet renders as follows:

TEXT-NO-TITLE

Note, for demo purposes the sample markdown above makes use of a custom CSS class called demo-box-pad, defined as follows:

.demo-box-pad #boxed-text {
  padding-top: 1.95em;
  padding-bottom: 1.95em;
}

The demo-box-pad class is 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.


2. Render Boxed Text With Title

To render text within a box-with-title on any slide you can use the following shortcut syntax in your PITCHME.md markdown file:

+++?color=black

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

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

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

@snap[south-west span-35]
@box[bg-blue text-white waved demo-box-pad](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.

One final note, for demo purposes the sample markdown above makes use of a custom CSS class called demo-box-pad, defined as follows:

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

The demo-box-pad class is 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 Template for a live, interactive demonstration of boxed-text rendered on slides, click here.


3. Render Styled Quotes

To render a nicely-styled quotation on any slide you can use the following shortcut syntax in your PITCHME.md markdown file:

---

@quote[Beware of geeks bearing formulas.]

This markdown snippet renders as follows:

QUOTE


4. Render Styled Quotes With Attribution

To render a quotation with attribution you can use the following shortcut syntax in your PITCHME.md markdown file:

---

@quote[It's what I do that defines me.](Bruce Wayne)

This markdown snippet renders as follows:

QUOTE-ATTRIBUTION

See The Template for a live, interactive demonstration of styled-quotes rendered on slides, click here.


5. Render Font-Awesome Icons

FONTAWESOME

See the Font-Awesome Icons documentation for details.


6. Render Styled Images

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 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 is no limit 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.