Header and Footer Support
Demo Time supports adding headers and footers to your slides at both the global and slide level.
Headers and footers make use of Handlebars syntax, allowing you to use variables from the front matter of your slides. This means you can include dynamic content like slide titles, dates, and other metadata.
You can define headers and footers in two ways:
- Global level: Set the
demoTime.slideHeaderTemplate
and/ordemoTime.slideFooterTemplate
settings in your VS Code settings. This should point to HTML files that may contain Handlebars variables/syntax. - Slide level: Add a
header
and/orfooter
property to your slide’s front matter. These can contain HTML and Handlebars variables.
Define on global level
You can define a global header or footer for all slides by setting the demoTime.slideHeaderTemplate
and/or demoTime.slideFooterTemplate
settings in your VS Code settings. These should point to HTML files using Handlebars syntax. For example:
{ // Use a relative path from your workspace root // (e.g., "./.demo/templates/header.html" is relative to your project folder) "demoTime.slideHeaderTemplate": "./.demo/templates/header.html", "demoTime.slideFooterTemplate": "./.demo/templates/footer.html"}
Example footer.html
:
<footer class="slide-footer"> <span>{{name}}</span> | <span>{{email}}</span> | <span>{{date}}</span></footer>
All front matter properties are available as Handlebars variables in the template.
---title: "My Slide Title"name: "Jane Doe"date: "2025-06-16"description: "A slide demonstrating header and footer variables."---
Slide number placeholders
Demo Time provides two Handlebars placeholders you can use in header and footer templates to show the current slide number and the total number of slides in the grouped presentation:
{{crntSlideIdx}}
— the current slide index (1-based) within the grouped slides.{{totalSlides}}
— the total number of slides in the current group.
These placeholders work in both global templates (set via demoTime.slideHeaderTemplate
/ demoTime.slideFooterTemplate
) and slide-level header
/footer
front matter. They reflect numbering after slides are grouped, so counts are across the entire group rather than just the current file.
Example footer.html
using the placeholders:
<footer class="slide-footer"> <span>Slide {{crntSlideIdx}} of {{totalSlides}}</span> <span class="muted"> | {{date}}</span></footer>
Define on slide level
You can also set the header and footer directly in the front matter of each slide. This allows for more granular control over individual slides or allows you to override the global settings for specific slides.
---name: "Demo Time"header: "<div style='display: flex;justify-content: flex-end;align-items:center;width: 100%;height: 100%;'><img src='public/favicon.svg' alt='Logo' width='25px' height='25px'></div>"footer: "<span>Created by {{name}}</span>"---
Changing header and footer styles
If you want to customize the styles of the header and footer, you can add a <style>
block in your Markdown file or use a global CSS file by defining it in the demoTime.customTheme
setting. For example:
<style> .slide__header, .slide__footer { background-color: rgba(0, 0, 0, 0.8); opacity: 1; color: white; }</style>