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.
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.
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!)
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!)
You can use @img shortcut syntax to turn any inline image on a slide into a fragment. For example:
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]
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
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>
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>