Fragment Slides

David Russell edited this page Apr 10, 2018 · 19 revisions

GitPitch supports the creation of Fragments within slides. Fragments are used to reveal individual elements on a slide in a sequential order rather than revealing all elements on the slide at once. The slideshow presentation will only move to the next slide when all fragments on the current slide have been revealed.

For a live demonstration of fragments on slides see the following live slideshow presentation. Remember to view the PITCHME.md for this slideshow for examples of the syntax used on each slide.

1. Unordered Lists with Fragment Items

Sample GitPitch shortcut syntax:

@ul

- Plain text list item
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item

@ulend

2. Unordered Lists with Custom CSS Class and Fragment Items

Sample GitPitch shortcut syntax:

@ul[squares]

- Plain text list item
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item

@ulend

Where squares corresponds to a sample custom CSS class you have defined in the custom css for your slideshow presentation. You can use this syntax to apply any CSS customization to the layout and rendering of lists on your slides.

3. Unordered Lists with Fragment-Specific Speaker Notes

Sample GitPitch shortcut syntax:

@ul

- Plain text list item @note[Cool! Fragment specific speaker notes :)]
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item @note[Fragment specific speaker notes are optional.]

@ulend

4. Ordered Lists with Fragment Items

Sample GitPitch shortcut syntax:

@ol

- Plain text list item
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item

@olend

5. Ordered Lists with Custom CSS Class and Fragment Items

Sample GitPitch shortcut syntax:

@ol[roman]

- Plain text list item
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item

@olend

Where roman corresponds to a sample custom CSS class you have defined in the custom css for your slideshow presentation. You can use this syntax to apply any CSS customization to the layout and rendering of lists on your slides.

6. Ordered Lists with Fragment-Specific Speaker Notes

Sample GitPitch shortcut syntax:

@ol

- Plain text list item @note[Cool! Fragment specific speaker notes :)]
- Rich **markdown** list *item*
- Link [within](https://gitpitch.com) list item @note[Fragment specific speaker notes are optional.]

@olend

NOTE: EVERYTHING APPEARING BELOW THIS LINE IS DEPRECATED FOR GITPITCH.COM USERS

The new fragment syntax documented above is recommended for all users of gitpitch.com. These syntax changes are backward compatible, so any existing presentation using the old syntax will continue to function as before.

If you are hosting your own open source GitPitch server you must continue to use the old syntax. These syntax shortcuts are available exclusively on gitpitch.com.

List Fragments where Item Content uses Simple Markdown

In the following example, when the slide first appears it will display only the simple-text Java item in the list. Each time the user tries to move ahead in the slideshow another item in the list will be revealed. Finally when the Scala item is revealed, any further attempts by the user to move ahead in the slideshow will result in the slideshow moving on to the next slide:

A shortcut syntax is provided to simplify the use of fragments for these types of simple, unordered lists:

- Java
- JavaScript |
- Kotlin     |
- Go         |
- Scala      |

The shortcut syntax uses the | operator to indicate a fragment. To be treated as fragment-syntax the | operator must be the final character on a line that was opened with the - unordered list item syntax. See the following demo presentation for example usage of this shortcut syntax for markdown fragments:

https://gitpitch.com/gitpitch/feature-demo/frag-shortcut-syntax

List Fragments where Item Content uses Rich Markdown

If you need to specify rich formatting within your list item content then in order to activate fragments you will need to use the following mixed HTML-Markdown syntax:

<ul>
<li class="fragment">**Get** the *word* out</li>
<li class="fragment">Here is link [link](https://gitpitch.com)</li>
<li class="fragment">Presentations for everyone</li>
<li class="fragment">For <span style="color:red">everyone</span>!</li>
</ul>

Fragments for General HTML Content

Fragments can also be used in conjunction with the HTML Slides feature. For example, the following snippet demonstrates how to reveal table data one row at a time:

<table>
  <tr>
    <th>Firstname</th>
    <th>Lastname</th> 
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill</td>
    <td>Smith</td>
    <td>50</td>
  </tr>
  <tr class="fragment">
    <td>Eve</td>
    <td>Jackson</td>
    <td>94</td>
  </tr>
  <tr class="fragment">
    <td>John</td>
    <td>Doe</td>
    <td>80</td>
  </tr>
</table>

Note the class fragment has been added on each <tr> element to enable this feature in HTML.