Pro Code Revealing



GitPitch Pro + Lite subscriptions activate powerful Pro syntax shortcuts supported by PITCHME.md markdown that can be used to generate rich visual components - aka. widgets - on any slide.

The Code Widget and GitHub GIST Widget support a number of powerful extensions beyond standard code presenting. This guide describes the Code Revealing extension. This feature gives you complete control over how and when code snippets are revealed on your slides.

Code Revealing behavior can be activated as needed on a slide-by-slide basis.

PRO-CODE-REVEALING

For a live, interactive GitPitch presentation demonstrating Code Revealing click on the image above.


Code Widget with Default Reveal Mode

Default reveal mode describes standard code presenting behavior:

  1. The full-code is first rendered on your slide.
  2. After displaying the full-code, you can then step-focus-and-zoom on specific snippets within that code.

For example, the following markdown activates standard code presenting resulting in default reveal mode for the source code found within the sample.js file:

---?color=#1d1f21

@code[js zoom-12](src/node/sample.js)

@snap[south span-100 text-08]
@[1, zoom-17](After displaying the full-code, each code presenting step lets you...)
@[3,4, zoom-16](The ability to focus-and-zoom on specific code snippets directly...)
@[6-10](Giving you a great way to focus the attention of your audience on what matters most...)
@snapend

This markdown snippet renders as follows:

CODE-MODE-DEFAULT



Code Widget with Slow Reveal Mode

Slow reveal mode describes the following behavior:

  1. The full-code on your slide is initially hidden.
  2. You can then move from this empty slide to step-focus-and-zoom on specific snippets within that code.

The initial slow reveal mode empty slide can be used to provide breathing space during a live presentation, especially when you are transitioning from regular-discussion content to code-specific content.

For example, the following markdown activates live code presenting using slow reveal mode on the source code found within the sample.js file:

---?color=#1d1f21

@code[js code-reveal-slow](src/node/sample.js)

@snap[south span-100 text-08]
@[1, zoom-20](Code revealing *slow-mode* lets you start by hiding the code on your slide.)
@[1-4, zoom-20](And then gradually introduce specific code snippets to your audience.)
@[1-10, zoom-12](Again using optional annotations to focus the attention of your audience.)
@snapend

Note the use of the code-reveal-slow property on the @code markdown widget. By activating this property on the widget the rendering behavior automatically changes to deliver slow reveal mode semantics.

The above markdown snippet renders as follows:

CODE-MODE-SLOW



Code Widget with Fast Reveal Mode

Fast reveal mode describes the following behavior:

  1. Your initial code slide is bypassed entirely.
  2. You therefore move directly to step-focus-and-zoom on specific code snippets.

For example, the following markdown activates live code presenting using fast reveal mode on the source code found within the sample.js file:

---?color=#1d1f21

@code[js code-reveal-fast](src/node/sample.js)

@snap[south span-100 text-08]
@[3-4, zoom-20](Code revealing *fast-mode* bypasses the intial full code slide.)
@[1-4, zoom-20](This lets you jump straight into sharing specific code snippets...)
@[1-10, zoom-12](Again using optional annotations to focus the attention of your audience.)
@snapend

Note the use of the code-reveal-fast property on the @code markdown widget. By activating this property on the widget the rendering behavior automatically changes to deliver fast reveal mode semantics.

The above markdown snippet renders as follows:

CODE-MODE-FAST



GitHub GIST Widget with Default Reveal Mode

Default reveal mode describes standard code presenting behavior:

  1. The full-code is first rendered on your slide.
  2. After displaying the full-code, you can then step-focus-and-zoom on specific snippets within that code.

For example, the following markdown activates standard code presenting resulting in default reveal mode for the source code found within the sample GitHub GIST:


@gist[groovy zoom-15](onetapbeyond/8da53731fd54bab9d5c6)

@[1, zoom-15](You can step-and-zoom into selected sections of code directly on your slides.)
@[4, zoom-20](Using GitPitch live code presenting with optional annotations.)
@[7-9, zoom-13](Allowing you to drill-down into your code and focus your audience's attention.)



GitHub GIST Widget with Slow Reveal Mode

Slow reveal mode describes the following behavior:

  1. The full-code on your slide is initially hidden.
  2. You can then move from this empty slide to step-focus-and-zoom on specific snippets within that code.

The initial slow reveal mode empty slide can be used to provide breathing space during a live presentation, especially when you are transitioning from regular-discussion content to code-specific content.

For example, the following markdown activates live code presenting using slow reveal mode on the source code found within the sample GitHub GIST:


@gist[groovy zoom-15 code-reveal-slow](onetapbeyond/8da53731fd54bab9d5c6)

@[1, zoom-15](You can step-and-zoom into selected sections of code directly on your slides.)
@[4, zoom-20](Using GitPitch live code presenting with optional annotations.)
@[7-9, zoom-13](Allowing you to drill-down into your code and focus your audience's attention.)

Note the use of the code-reveal-slow property on the @gist markdown widget. By activating this property on the widget the rendering behavior automatically changes to deliver slow reveal mode semantics.



GitHub GIST Widget with Fast Reveal Mode

Fast reveal mode describes the following behavior:

  1. Your initial code slide is bypassed entirely.
  2. You therefore move directly to step-focus-and-zoom on specific code snippets.

For example, the following markdown activates live code presenting using fast reveal mode on the source code found within the sample GitHub GIST:


@gist[groovy zoom-15 code-reveal-fast](onetapbeyond/8da53731fd54bab9d5c6)

@[1, zoom-15](You can step-and-zoom into selected sections of code directly on your slides.)
@[4, zoom-20](Using GitPitch live code presenting with optional annotations.)
@[7-9, zoom-13](Allowing you to drill-down into your code and focus your audience's attention.)

Note the use of the code-reveal-fast property on the @gist markdown widget. By activating this property on the widget the rendering behavior automatically changes to deliver fast reveal mode semantics.