Markdown Text



This guide demonstrates a number of powerful text-manipulation techniques for plain-text markdown on any slide.


Plain Text Basic Example

The following markdown snippet:


---

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Renders as follows:

TEXT MANIPULATION EXAMPLE

A single line of plain-text is rendered as a paragraph. If your slide needs to render multiple paragraphs, add an empty line between each paragraph in your PITCHME.md.


Plain Text Auto-Color Example

The following markdown snippet:


---?color=#0F2862

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.

Renders as follows:

TEXT MANIPULATION EXAMPLE

In this example a solid dark background color was set on the slide using a color delimiter. The color of text on the slide was auto-adjusted to ensure the text content remains legible against the custom background.

Note: Auto-adjusting the color of your text works for solid background colors only. If you are using an image background or a gradient background on a slide then you may need to set an explicit color for your text to ensure that content is legible.


Plain Text Custom-Space Example

The following markdown snippet:


---?color=#FEA49F

@snap[midpoint span-50]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
@snapend

Renders as follows:

TEXT MANIPULATION EXAMPLE

This example demonstrates the use of Span Utility Styles to constrain the slide area used to render our sample text. It is worth noting, this same technique can be used to constrain space for content of all types, not just text.


Plain Text Custom Size Example

The following markdown snippet:


---?color=#1561AD

@snap[midpoint span-50 text-07]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
@snapend

Renders as follows:

TEXT MANIPULATION EXAMPLE

This example demonstrates the use of built-in Font-Size Utility Styles to activate a custom font-size for our sample text.


Plain Text Custom Space and Size Example

The following markdown snippet:


---?color=#09868B

@snap[west span-40 text-08]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
@snapend

Renders as follows:

TEXT MANIPULATION EXAMPLE

This example demonstrates a combination of built-in Span Utility Styles and Font-Size Utility Styles to constrain the slide area for our text while also activating a custom font-size for that text.


Plain Text Custom-Color Example

The following markdown snippet:


---?color=#1D1E22

@snap[midpoint span-50 text-pink]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
@snapend

Renders as follows:

TEXT MANIPULATION EXAMPLE

This example demonstrates the use of built-in Font-Color Utility Styles to activate a custom font-color for our sample text.


Plain Text Custom-Color CSS Example

The following markdown snippet:


---?color=#393f4d

@snap[midpoint span-50 silver-fox]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
@snapend

Renders as follows:

TEXT MANIPULATION EXAMPLE

This example demonstrates the use of Custom CSS Styles to activate a custom font-color for our sample text. In this case, the silver-fox custom CSS style was defined as follows:

.silver-fox { color: #D4D4DC !important; }


Plain Text Custom-Font Example

The following markdown snippet:


---?color=linear-gradient(180deg, white 50%, #005f6b 50%)

@snap[north span-100 font-righteous]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
@snapend

@snap[south span-100 font-montserrat text-white]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.
@snapend

Renders as follows:

TEXT MANIPULATION EXAMPLE

This example demonstrates the use of built-in Font-Family Utility Styles to activate a custom fonts for our sample text.

Note: As this example uses a gradient background an explicit text-white property was activated in the south grid-position to ensure the text content is legible.


Plain Text Custom-Transforms Example

The following markdown snippet:


---?color=#FF3A22

@snap[north span-100 text-smallcaps]
Lorem ipsum dolor sit amet
@snapend

@snap[midpoint span-100 text-italics]
Lorem ipsum dolor sit amet
@snapend

@snap[south span-100 text-uppercase]
Lorem ipsum dolor sit amet
@snapend

Renders as follows:

TEXT MANIPULATION EXAMPLE

This example demonstrates the use of built-in Text-Transform Utility Styles to activate a custom transforms for our sample text.


List Item Text Customizations Example

List items are another example of plain-text on slides. For example, the following markdown snippet:


---?color=#1561AD

- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.

Renders as follows:

LIST ITEM MANIPULATION EXAMPLE

We can manipulate list item text by activating custom properties using List Widget syntax:


---?color=#1D1E22

@ul[list-square-bullets list-spaced-bullets font-righteous text-pink](false)
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.       
@ulend

Renders as follows:

LIST ITEM MANIPULATION EXAMPLE

This example demonstrates the use of built-in List-Style, Font-Family, and Text-Color utility styles to activate a custom styling for our sample list items.