Pro Code Step-and-ZOOM



GitPitch Pro + Lite subscriptions activate the Pro Code Step-and-ZOOM features.

STEP-AND-ZOOM

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


Pro Code Zoom

The Code ZOOM feature let’s you zoom-in or zoom-out on an entire code block when code presenting on any slide.

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 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 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-xx style where xx > 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-xx style where xx < 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 source code found within the sample.go 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 presenting 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. The full series of zoom-xx styles from zoom-01 through zoom-60 are available to you out-of-the-box. For details, see the Pro Step-and-ZOOM CSS Styles guide.


Pro Code Step-and-Zoom

Code Step-and-ZOOM let’s you zoom-in or zoom-out on a specific line-of-code or range-of-code when code presenting on any slide.

---?color=#333

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

@snap[south span-100]
@[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.)
@snapend

This markdown snippet renders as follows:

STEP-AND-ZOOM

Zooming into selected lines-of-code and ranges-of-code when code presenting is achieved using a set of built-in zoom CSS styles. You simply specify the degree of zoom you want for each individual code-fragment marker. For example:

@[1, zoom-25](You can step-and-zoom into selected sections of code directly on your slides.)

This sample code-fragment marker makes use of the zoom-25 class to magnify the corresponding lines of code on your slide. The full series of zoom-xx styles from zoom-01 through zoom-60 are available to you out-of-the-box. For details, see the Pro Step-and-ZOOM CSS Styles guide.


Pro GIST Step-and-Zoom

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-xx style where xx > 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.


Pro Step-and-ZOOM CSS Styles

Zooming into and out of code on your slides is dependent on the following set of built-in zoom CSS styles. The full series of zoom-xx styles from zoom-01 through zoom-60 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-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; }

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

Note, as a presentation author it is your responsibility to select appropriate zoom-xx values to ensure the corresponding code still fits on the slide. In some instances, this might involve using a zoom-xx value where xx < 1, causing a zoom-out effect for your code.