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

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.