Pro Code ZOOM


Activate a GitPitch Paid Plan to unlock Pro Code ZOOM.

The Pro Code ZOOM feature lets you zoom-in and zoom-out on code on any slide.

STEP-AND-ZOOM

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


Fenced Code Block With ZOOM

The ZOOM feature lets you zoom-in or zoom-out on an entire code block when rendering code using a fenced code block on your slide. For example, here is a markdown snippet that activates a custom ZOOM on a fenced code block:


    ---

    @snap[north span-100]
    #### Fenced Code Block with Pro Code Zoom
    @snapend

    ```sql zoom-20   
    CREATE TABLE "topic" (
        "id" serial NOT NULL PRIMARY KEY,
        "forum_id" integer NOT NULL,
        "subject" varchar(255) NOT NULL
    );                              
    ALTER TABLE "topic"      
    ADD CONSTRAINT forum_id       
    FOREIGN KEY ("forum_id")
    REFERENCES "forum" ("id");
    ```

Results in the rendering of the following slide:

CODE-FCB-PRO-ZOOM

Note the use of the zoom-20 property set on the opening triple back-ticks on the fenced code block above. ZOOM-In properties make code appear larger on the slide.


Source Code Delimiter With ZOOM

The ZOOM feature lets you zoom-in or zoom-out on an entire code block when rendering code using a source code delimiter on your slide. For example, here is a markdown snippet that activates a custom ZOOM on a source code delimiter:


---?code=src/ruby/sample.rb&lang=ruby zoom-21

@snap[north span-100]
#### Source Code Delimiter with Pro Code Zoom
@snapend

Results in the rendering of the following slide:

CODE-DELIM-PRO-ZOOM

Note the use of the zoom-21 property set as a value on the lang option on the source code delimiter above. ZOOM-In properties make code appear larger on the slide.


Code Widget With ZOOM

The ZOOM feature lets you zoom-in or zoom-out on an entire code block when rendering code using a Code Widget on your slide. For example, here is a markdown snippet that activates a custom ZOOM on a code widget:


@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.


Code ZOOM within Snap Layouts

The ZOOM feature can be used to customize the rendering of code within the Snap Layouts Grid. For example, here is a markdown snippet that activates a custom ZOOM to deliver a code thumbnail on a sample slide:


---

@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 the use of the zoom-07 property on the code widget. The ZOOM-Out properties make code appear smaller on the slide.


Live Code Presenting with Step-and-ZOOM

Live code presenting with Step-and-ZOOM lets you activate custom zoom-in or zoom-out on individual code presenting steps. This feature is available regardless of what approach you have used to inject the source code onto your slide.

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


@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



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 Code ZOOM-In 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.



GitHub GIST Widget with Step-and-ZOOM

Here is a markdown snippet that demonstrates Step-and-ZOOM activated for a number of live code presenting steps on a GitHub GIST:


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

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

This markdown snippet renders as follows:

GIST-STEP-AND-ZOOM



Code ZOOM-In Properties

The following ZOOM-In style properties can be used 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.



Code ZOOM-Out Properties

The following ZOOM-Out style properties can be used 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.