Create a New Custom Design For marmota.app Presentations

First, save your presentation, create a designs folder and drop the example designs ZIP file there. Then you can start to create your own custom designs from the example designs.

Auto Reload

When the current design of your presentation is a custom design (located inside the presentation folder), the preview of the presentation re-loads the design every couple of seconds.

So, when you edit one of the desings inside the designs folder of your presentation, open the presentation in marmota.app and select that design. When you save your changes, you will see the effect they have on your presentation almost immediately.

Design ID and Metadata

Every design consists of at least three files: design.json, design.css and preview.md. The JSON file contains the metadata of the design.

{
	"id": "example/simple",
	"basedOn": "marmota.app/common",

	"author": "marmota.app",
	"contact": {
		"email": "hello@marmota.app",
		"web": "https://marmota.app",
		"twitter": "https://twitter.com/MarmotaApp"
	}
}

The path inside the designs folder should match the id of your design. So, if your design id is "example/simple", it should be located in designs/example/simple.

Change the ID to something more appropriate, e.g. [your company name]/[a design name] and move the design to the corresponding folder. The author and contact entries contain additional information that you can fill in.

When you set basedOn to a design ID of another design, your design will inherit all the CSS of that design. In the examples ZIP file, the design exmaple/simple inherits all CSS from marmota.app/common. You can choose to not base your design on marmota.app/common, but we do not recommend that: When a new feature needs new CSS, we will implement it in marmota.app/common in a backwards-compatible way, so by basing your design on that, you are always up-to-date.

Your design can also be indireclty be based on marmota.app/common: You can set basedOn to another design that is then based on marmota.app/common.

Common Slide Designs

Presentation slides can contain an option called slide-design that selects a different slide design within the design of the presentation, e.g. slide-design=subtitle. The content of such a slide gets the CSS class slide-design-[name], e.g. slide-design-subtitle. The info block of the same slide (which contains the slide number, author information, etc.) gets the CSS class slide-info-[name], e.g. slide-info-subtitle.

Every design should support the following common slide designs:

General-Purpose Blocks

Presentations can use Markdown-blockquotes to create general-purpose blocks:

>{render-as=author} A general-purpose block with the
> CSS-class box-author

The blockquote above will not be rendered as a HTML blockquote element, but as a div with the CSS-class box-author. Your design can support certain general-purpose blocks by adding CSS styling for the block's name:

.box-author: {
	border: 1px solid var(--fg-color-1-normal);
}

CSS, Images etc.

If you want to use images in your presentation design, you must access them via the special url design:/[design id]/[path to image], e.g.:

.slide > section {
	background-image: url(design:/example/simple/dragonfly-light.jpg);
	background-size: cover;
}

Presentation slides render as HTML with classes added that you can reference in your design. Refer to design.css of the common design to see how marmota.app/common styles the presentation. The most important CSS classes are:

If a slide contains two columns, it will contain multiple sections, so you can display the columns using:

.slide > section section {
	width: calc(50% - 0.5em);
	float: left;
}
.slide > section section:nth-child(2n) {
	margin-left: 1em;
}
.slide > section section:only-child {
	width: 100%;
	float: none;
}

Syntax Highlighting

Syntax highlighting for source code by default uses the colors you have defined in your design. If that does not match your expectation, you can get more fine-grained control over how syntax highlighting is rendered by defining the following variables:

The Preview Slide

Your presentation design must also contain a preview presentation called preview.md. The design selector always shows the first slide of that presentation. With this slide, you can make your design easily recognizable and also showcase some features of your design.