Pro Code Step-and-ZOOM



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 wide range of powerful extensions beyond standard code presenting. This guide describes the Step-and-ZOOM extension. This feature gives you the ability to zoom-in and zoom-out on code as you step through it on your slides.

Code Step-and-ZOOM behavior can be activated as needed on a slide-by-slide basis.

STEP-AND-ZOOM

For a live, interactive GitPitch presentation demonstrating Code Step-and-ZOOM click on the image above.


Code Widget With ZOOM

The ZOOM feature lets you zoom-in or zoom-out on an entire code block when rendering source code on your slide using the @code widget. The zoom-in feature is activated by specifying one of the built-in ZOOM-IN Style Properties as a property on the widget.

For example, here is a markdown snippet that activates a custom zoom property for a @code widget rendering a Go source file:


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

This markdown snippet renders as follows:

Note the use of the zoom-21 property set on the @code widget above. ZOOM-IN properties make code appear larger on the slide. Zooming in on code delivers beautiful looking code slides that are highly legible and engaging for any audience.

We can also zoom-out by specifying one of the built-in ZOOM-OUT properties on our @code widget:


---

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

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

This markdown snippet renders as follows:

Note above the use of the zoom-07 property on the @code widget. The ZOOM-OUT properties make code appear smaller on the slide. Perfect for creating thumbnails of your code.


Code Widget with Step-and-ZOOM

The Step-and-ZOOM feature lets you zoom-in or zoom-out on a specific line-of-code or range-of-code when live code presenting on any slide. This feature is activated by specifying one of the built-in ZOOM-IN or ZOOM-OUT styles as a property on individual code-fragment markers.

For example, here is a markdown snippet that demonstrates Step-and-ZOOM activated for a number of code-presenting steps:


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

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

This markdown snippet renders as follows:

STEP-AND-ZOOM



GitHub GIST Widget with ZOOM

The ZOOM feature lets you zoom-in or zoom-out on an entire code block when rendering source code on your slide using the @gist widget. The zoom-in feature is activated by specifying one of the built-in ZOOM-IN Style Properties as a property on the widget.

For example, here is a markdown snippet that activates a custom zoom property for a @gist widget rendering a Groovy code snippet:


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

This markdown snippet renders as follows:

Note the use of the zoom-15 property set on the @gist widget above. ZOOM-IN properties make code appear larger on the slide. Zooming in on code delivers beautiful looking code slides that are highly legible and engaging for any audience.

We can also zoom-out by specifying one of the built-in ZOOM-OUT properties on our @gist widget. Perfect for creating thumbnails of GIST code.



GitHub GIST Widget with Step-and-ZOOM

The Step-and-ZOOM feature lets you zoom-in or zoom-out on a specific line-of-code or range-of-code when live code presenting on any slide. This feature is activated by specifying one of the built-in ZOOM-IN or ZOOM-OUT styles as a property on individual code-fragment markers.

For example, here is a markdown snippet that demonstrates Step-and-ZOOM activated for a number of code-presenting steps:


@gist[groovy zoom-12](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.)

This markdown snippet renders as follows:

GIST-STEP-AND-ZOOM



ZOOM-IN Style Properties

The following ZOOM-IN CSS styles can be set as properties on @code and @gist widgets to make source code appear larger on your slide:


.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-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-58 { font-size: 5.8em !important; line-height: 1.1 !important; }
.zoom-59 { font-size: 5.9em !important; line-height: 1.1 !important; }
.zoom-60 { font-size: 6.0em !important; line-height: 1.1 !important; }

The full series of ZOOM_IN styles ranging from zoom-11 through zoom-60 are available to you out-of-the-box. As a Pro user, you can define new styles or override existing zoom styles. See the custom css guide for related details.



ZOOM-OUT Style Properties

The following ZOOM-OUT CSS styles can be set as properties on @code and @gist widgets to make source code appear smaller on your slide:


.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-10 { font-size: 1.0em !important; line-height: 1.2 !important; }

As a Pro user, you can define new styles or override existing zoom styles. See the custom css guide for related details.