Examples - Snap MD Shortcuts



GitPitch supports a wide range of mardown shortcuts that can be used to dramatically alter the appearance or behavior of content on any slide. The following examples demonstrate how content developed using those shortcuts can be positioned by the snap-layout system.



Example 1. Snap Markdown CSS Shortcuts

The following sample slide markdown demonstrates the use of a mixture of regular slide content, plus snap-layout tags to position content enhanced using css shortcut syntax:

---

## Regular Slide Content

@snap[south message-box]
@css[message](Snapped CSS Shortcut)
@snapend

This markdown snippet renders as follows:

SNAP-CSS-SHORTCUT

Notice the use of the sample custom css class - called message-box - that was used to style the south position on the slide. Here is the full definition of the custom css styles used to create this slide:

.message-box {
  width: 80%;
  border-radius: 20px;
  background-color: black;
  padding: 20px 20px !important;
}


Example 2. Snap Markdown Color & Size Shortcuts

The following sample slide markdown demonstrates the use of a mixture of regular slide content, plus snap-layout tags to position content enhanced using both color & size shortcut syntax:

---
  
## Regular Slide Content

@snap[north-east]
@color[#e49436](Snapped Color Shortcut)
@snapend

@snap[south-west]
@size[2em](Snapped Size Shortcut)
@snapend

This markdown snippet renders as follows:

SNAP-COLOR-SIZE-SHORTCUT


Example 3. Snap Markdown List Fragment Shortcuts

The following sample slide markdown demonstrates the use of a mixture of regular slide content, plus snap-layout tags to position content enhanced using list fragment shortcut syntax:

---

## Regular Slide Content

@snap[north-west]
@ol
- Use Snap Layouts
- To Position Content
- On Any Slide
@olend
@snapend

This markdown snippet renders as follows:

SNAP-LIST-FRAGMENTS-SHORTCUT


Example 4. Snap Markdown FontAwesome Shortcuts

The following sample slide markdown demonstrates the use of a mixture of regular slide content, plus snap-layout tags to position content enhanced using font awesome shortcut syntax:

---

## Regular Slide Content

@snap[north]
@fa[github fa-3x]
@snapend

@snap[south-east]
@fa[gitlab fa-3x]
@snapend

@snap[south]
@fa[git fa-3x]
@snapend

@snap[south-west]
@fa[bitbucket fa-3x]
@snapend

This markdown snippet renders as follows:

SNAP-FA-SHORTCUT