Snap Layout Basic Syntax




Snap Layout Basic Syntax

The snap-layout system supports a @snap[point] shortcut-syntax in your PITCHME.md that can be used to customize the position of your slide content.

---
@transition[none]

@snap[north]
Hello, World!
@snapend

The content appearing between snap-layout tags in your markdown - in this case Hello, World! - is the content rendered on the slide. That content is rendered at the position indicated by the [point] on the opening @snap tag.

The full set of points you can use on the @snap tag are documented as cardinal points and ordinal points.

You may have noticed the addition of the @transition[none] syntax to the sample slide markdown above. See the snap layout slide transitions doc to understand why this is set on slides using snap-layouts.


Snap Layout Cardinal Points

The snap-layout system uses the cardinal points system to identify targeted positions on any slide:

  • north
  • east
  • south
  • west

For example, using the following snap-layout syntax on a sample slide:

---
@transition[none]

@snap[north]
North
@snapend

@snap[east]
East
@snapend

@snap[south]
South
@snapend

@snap[west]
West
@snapend
  
@snap[midpoint]
MidPoint
@snapend

This markdown snippet renders as follows:

LAYOUT-POINTS-CARDINAL

In addition to the basic cardinal points, a special midpoint position is also defined that can be used to center content on any slide.


Snap Layout Ordinal Points

The snap-layout system also supports the following set of ordinal points that can be used to identify additional targeted positions on any slide:

  • north-east
  • south-east
  • south-west
  • north-west

For example, here are the ordinal points being used to position content on a sample slide:

---
@transition[none]

@snap[north-east]
North-East
@snapend

@snap[south-east]
South-East
@snapend

@snap[south-west]
South-West
@snapend

@snap[north-west]
North-West
@snapend

@snap[midpoint]
MidPoint
@snapend

This markdown snippet renders as follows:

LAYOUT-POINTS-ORDINAL


Snap Layout Slide Coverage

The full set of targeted positions supported by the snap-layout system are shown in the following screenshot:

LAYOUT-POINTS-ALL

As you can see, the full set of points available for positioning content provide comprehensive coverage of the slide canvas area.