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:
title
: The title slide of the presentationsubtitle
: A subtitle slide, e.g. for a new sectionabout-author
: A slide with information about the author / presentertoc
: The table of contentsabstract
: A short abstract of the presentationhighlight
: A slide that contains normal content, but is highlightedconclusions
: The conclusions of the presentation
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:
.slide
: The outermost section of each slide.slide .color-highlight
: A section inside the slide can have the.color-highlight
class when the presentation wants highlight that slide..author
: If the presentation has an author set, the name will render here..slide-number
: If the presentation is configured to show slide numbers, they will render here..info-1
,.info-2
,.info-3
,.info-4
: Additional information will render here..color-alternative
: Headlines can be rendered in an alternative color, specified in it's options.shadow
: Headlines can be rendered with a shadow, specified in it's options
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:
--syntax-highlight-color-strong
--syntax-highlight-color-standard
--syntax-highlight-color-1
--syntax-highlight-color-2
--syntax-highlight-color-3
--syntax-highlight-bg-deletion
--syntax-highlight-fg-deletion
--syntax-highlight-bg-addition
--syntax-highlight-fg-addition
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.