Custom Slide Layout

You can also create your own custom layout by creating an HTML template that uses Handlebars as the templating engine. Define the relative path to the template in the customLayout property in the front matter section of the slide.

All slide properties will be passed to the template, and you can use them in your custom layout by using the following syntax:

{{metadata.<property>}}

For the slide content, you can use the {{{content}}} property to render the content of the slide.

Custom layout example

custom-layout.html

<div>
  {{#if metadata.title}}<h1>{{metadata.title}}</h1>{{/if}}
  <div class="content">
    {{{content}}}
  </div>
</div>

Using a custom layout

To use a custom layout, you can specify the path to the layout file in the front matter section of the slide:

slide-with-custom-layout.md

---
customLayout: "custom-layout.html"
title: My custom layout
---

# This is my custom layout

Outcome of the custom layout

<div>
  <h1>My custom layout</h1>
  <div class="content">
    <h1>This is my custom layout</h1>
  </div>
</div>