Markdown Fragments


Markdown fragments are a great way to introduce key concepts to your audience - one idea at a time.

Markdown fragment support is a simple yet powerful feature that can be used to reveal individual elements on a slide one-by-one. As distinct to revealing all elements on the slide at once.

This feature has great utility for presentation authors as it allows you to focus your audience’s attention on key concepts, revealing additional content on the slide only when the time is right.

MARKDOWN-FRAGMENTS

Click on the above image to experience markdown fragments within a live GitPitch presentation.

Because slide fragments are so widely used to present lists-content GitPitch supports special list-content syntax, see the Markdown List Fragments Guide for details.

Beyond lists, almost any element on a slide can be turned into a slide fragment. This guide details the use of markdown fragments with different types of slide content.

You can create an unlimited number of fragments on an individual slide. The order in which the fragments are revealed on your slide matches the order in which the fragments are declared in your PITCHME.md.



1. Text Fragments

You can use @css shortcut syntax to turn any piece of text on a slide into a fragment. For example:

---

@css[text-blue fragment](Hello, World!)


2. Boxed-Text Fragments

You can use @box shortcut syntax to turn any piece of boxed-text on a slide into a fragment. For example:

---

@box[text-orange span-80 fragment](Mars Attacks # Greetings earthlings. We come in peace!)


3. Image Fragments

You can use @img shortcut syntax to turn any inline image on a slide into a fragment. For example:

---

@img[fragment](assets/img/pic.png)


4. Font Awesome Icon Fragments

You can use @fa shortcut syntax to turn any Font Awesome icon on a slide into a fragment. For example:

---

@fa[smile-o fa-4x fa-spin fragment]


5. Snap Layouts Fragments

You can use @snap layouts syntax to make any snap-region on a slide into a fragment. For example:

---

@snap[west]
# Hello
@snapend

@snap[east fragment]
# World!
@snapend


6. Table Row Fragments

To reveal table data one row at a time you can activate the fragment class on each row using standard HTML markup syntax. For example:

---

<table>
  <tr>
    <th>Name</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>25</td>
  </tr>
  <tr class="fragment">
    <td>Eve</td>
    <td>94</td>
  </tr>
  <tr class="fragment">
    <td>John</td>
    <td>43</td>
  </tr>
</table>


7. HTML Snippet Fragments

HTML snippets are valid markdown. And given fragment is a regular CSS class it can be activated on any element that accepts a class property, including all HTML snippets. For example:

---

<h2 class="fragment">Hello, World!</h2>