Markdown Pro Widgets



Beyond the standard set of Markdown Widgets available to all presentation authors, GitPitch also supports a number of Markdown Pro Widgets provided as a bonus feature for GitPitch Pro Subscribers.


1. Render Emojis On Any Slide

Emojis can be used to inject a rich visual representation of an easily identified object, thought, or feeling alongside text on any slide. When used judiciously, emojis can help to enrich tone, add clarity, and even humor to a slideshow presentation.

PRO-WIDGET-EMOJIS

GitPitch support includes emojis for people, places, symbols, objects, activities, and foods.

To render an emoji on any slide you can use the following shortcut syntax in your PITCHME.md markdown file, for example:

---

@emoji[emoji-name]

Where emoji-name is any one of hundreds of available emojis currently supported. GitPitch supports the Twitter Emoji Set. You can browse and search the complete set of supported Twitter emoji in the emoji-awesome library here.

Here is a markdown snippet demonstrating actual usage:

---

## Summer @emoji[sunny] + @emoji[sunflower] = happy @emoji[honeybee]

This markdown snippet renders as follows:

PRO-WIDGET-EMOJI

Emojis are rendered on your slide at the size of the surrounding text. This means you can use standard markdown heading syntax to increase or decrease the size of the emoji icons rendered on your slides, for example:

---

@snap[north]
#### @emoji[heart_eyes]
@snapend

@snap[midpoint]
# @emoji[heart_eyes]
@snapend

@snap[south]
## @emoji[heart_eyes]
@snapend

This markdown snippet renders as follows:

PRO-WIDGET-EMOJI

Emojis can also be used right alongside existing font-awesome icons to create novel and visually striking slides, for example:

---

### GitPitch delivers @emoji[dolphin]
### Font Awesome @fa[magic text-orange] Magic
### alongside Emojis @emoji[heart_eyes fa-spin]

This markdown snippet renders as follows:

PRO-WIDGET-EMOJI

Note, if you pay very careful attention to the sample markdown snippet above you will notice that you can even activate font-awesome animation classes on emojis within GitPitch slides!



2. Render Source Code With Custom Zoom Controls

For a live, interactive GitPitch presentation demonstrating source code with zoom controls click here.

Using standard code delimiter syntax you can inject the content of any source code or text file within your repository onto a slide. Your source code will be nicely rendered using automatic syntax-highlighting.

For example, the following code delimiter syntax snippet demonstrates how to inject the contents of the sample.go repository file onto a slide:


---?code=src/go/sample.go&lang=golang

This markdown snippet renders as follows:

But to take full advantage of Pro rendering capabilities for your source code, GitPitch supports a more powerful @code shortcut syntax.

For example, the following markdown snippet demonstrates how to use the @code tag to inject the contents of the same sample.go repository file onto a slide:


---

@code[golang](src/go/sample.go)

Note, the golang language hint - a highlight.js language alias - ensures proper syntax-highlighting for the type of code in the file. This hint must be specified as the first value within the @code[hint…] tag. This markdown snippet renders as follows:

So far, it looks the same as code delimiter injection. But we can immediately take advantage of the @code tag to zoom-in or zoom-out on code rendered on our slides. For example, here is a markdown snippet that makes use of a built-in zoom CSS style activated on the @code tag:


---?color=#333

@code[golang zoom-21](src/go/sample.go)

Note the use of the zoom-21 style on the @code tag above. A zoom-xxx style where xxx > 1 will zoom-in on your code, making it appear larger on the slide. This markdown snippet renders as follows:

Zooming in on code delivers beautiful looking code slides that are highly legible and engaging for any audience.

We can also zoom-out using an appropriate zoom style on our @code tag:


---

@snap[west span-40]
@code[golang zoom-07](src/go/sample.go)
@snapend

@snap[east span-50]
### Live Code Presenting
@snapend

Note above the use of the zoom-07 style on the @code tag. A zoom-xxx style where xxx < 1 will zoom-out on your code, making it appear smaller on the slide. Perfect for creating thumbnails of your code.

This markdown snippet renders as follows:

As expected, GitPitch code presenting with annotations works seamlessly with the @code tag.

For example, the following snippet activates live code presenting on the souce code found within the sample.go repository file:


---?color=#333

@code[golang zoom-21](src/go/sample.go)

@[1](And of course, you can step through your code directly within your slide deck.)
@[3](Using the GitPitch live code presentating with annotations feature.)
@[5-7](Which means no need to switch back and forth between your slide deck and IDE.)

This markdown snippet renders as follows:

Zooming into and out of code on your slides is dependent on the following set of built-in zoom CSS styles. These styles are available to you out-of-the-box:


.zoom-01 { font-size: 0.1em !important; line-height: 1.5 !important; }
.zoom-02 { font-size: 0.2em !important; line-height: 1.5 !important; }
.zoom-03 { font-size: 0.3em !important; line-height: 1.5 !important; }
.zoom-04 { font-size: 0.4em !important; line-height: 1.5 !important; }
.zoom-05 { font-size: 0.5em !important; line-height: 1.5 !important; }
.zoom-06 { font-size: 0.6em !important; line-height: 1.5 !important; }
.zoom-07 { font-size: 0.7em !important; line-height: 1.5 !important; }
.zoom-08 { font-size: 0.8em !important; line-height: 1.5 !important; }
.zoom-09 { font-size: 0.9em !important; line-height: 1.5 !important; }
.zoom-11 { font-size: 1.1em !important; line-height: 1.2 !important; }
.zoom-12 { font-size: 1.2em !important; line-height: 1.2 !important; }
.zoom-13 { font-size: 1.3em !important; line-height: 1.2 !important; }
.zoom-14 { font-size: 1.4em !important; line-height: 1.2 !important; }
.zoom-15 { font-size: 1.5em !important; line-height: 1.2 !important; }
.zoom-16 { font-size: 1.6em !important; line-height: 1.2 !important; }
.zoom-17 { font-size: 1.7em !important; line-height: 1.2 !important; }
.zoom-18 { font-size: 1.8em !important; line-height: 1.1 !important; }
.zoom-19 { font-size: 1.9em !important; line-height: 1.1 !important; }
.zoom-20 { font-size: 2.0em !important; line-height: 1.1 !important; }
.zoom-21 { font-size: 2.1em !important; line-height: 1.1 !important; }
.zoom-22 { font-size: 2.2em !important; line-height: 1.1 !important; }
.zoom-23 { font-size: 2.3em !important; line-height: 1.1 !important; }
.zoom-24 { font-size: 2.4em !important; line-height: 1.1 !important; }
.zoom-25 { font-size: 2.5em !important; line-height: 1.1 !important; }
.zoom-30 { font-size: 3.0em !important; line-height: 1.1 !important; }

As a Pro user, you can define new styles or override existing zoom styles to use with @code tags. See the custom css guide for related details.



3. Render GitHub GIST With Custom Zoom Controls

For a live, interactive GitPitch presentation demonstrating Github GIST with zoom controls click here.

Using standard gist delimiter syntax you can inject the content of any GitHub GIST onto a slide. The GIST source will be nicely rendered using automatic syntax-highlighting.

But to take full advantage of Pro rendering capabilities for GitHub GIST, GitPitch supports a more powerful @gist shortcut syntax.

For example, the following markdown snippet demonstrates how to use the @gist tag to inject the contents of the GIST onto a slide:


---

@gist[js](ValeriiVasin/1548808)

Note, the js language hint - a highlight.js language alias - ensures proper syntax-highlighting for the type of code in the file. This hint must be specified as the first value within the @gist[hint…] tag. This markdown snippet renders as follows:

Zooming in on GIST delivers beautiful looking code slides that are highly legible and engaging for any audience. For example:


---

@gist[js zoom-20](ValeriiVasin/1548808)

Note the use of the zoom-20 style on the @gist tag above. A zoom-xxx style where xxx > 1 will zoom-in on the code, making it appear larger on the slide. This markdown snippet renders as follows:

As expected, GitPitch code presenting with annotations works seamlessly with the @gist tag.

Zooming into and out of code on your slides is dependent on the following set of built-in zoom CSS styles. These styles are available to you out-of-the-box:


.zoom-01 { font-size: 0.1em !important; line-height: 1.5 !important; }
.zoom-02 { font-size: 0.2em !important; line-height: 1.5 !important; }
.zoom-03 { font-size: 0.3em !important; line-height: 1.5 !important; }
.zoom-04 { font-size: 0.4em !important; line-height: 1.5 !important; }
.zoom-05 { font-size: 0.5em !important; line-height: 1.5 !important; }
.zoom-06 { font-size: 0.6em !important; line-height: 1.5 !important; }
.zoom-07 { font-size: 0.7em !important; line-height: 1.5 !important; }
.zoom-08 { font-size: 0.8em !important; line-height: 1.5 !important; }
.zoom-09 { font-size: 0.9em !important; line-height: 1.5 !important; }
.zoom-11 { font-size: 1.1em !important; line-height: 1.2 !important; }
.zoom-12 { font-size: 1.2em !important; line-height: 1.2 !important; }
.zoom-13 { font-size: 1.3em !important; line-height: 1.2 !important; }
.zoom-14 { font-size: 1.4em !important; line-height: 1.2 !important; }
.zoom-15 { font-size: 1.5em !important; line-height: 1.2 !important; }
.zoom-16 { font-size: 1.6em !important; line-height: 1.2 !important; }
.zoom-17 { font-size: 1.7em !important; line-height: 1.2 !important; }
.zoom-18 { font-size: 1.8em !important; line-height: 1.1 !important; }
.zoom-19 { font-size: 1.9em !important; line-height: 1.1 !important; }
.zoom-20 { font-size: 2.0em !important; line-height: 1.1 !important; }
.zoom-21 { font-size: 2.1em !important; line-height: 1.1 !important; }
.zoom-22 { font-size: 2.2em !important; line-height: 1.1 !important; }
.zoom-23 { font-size: 2.3em !important; line-height: 1.1 !important; }
.zoom-24 { font-size: 2.4em !important; line-height: 1.1 !important; }
.zoom-25 { font-size: 2.5em !important; line-height: 1.1 !important; }
.zoom-30 { font-size: 3.0em !important; line-height: 1.1 !important; }

As a Pro user, you can define new styles or override existing zoom styles to use with @gist tags. See the custom css guide for related details.