Slide Syntax

Fusuma has some own slide syntax like to create a table of contents automatically, etc. In addition, all syntaxes are written as a comment. You can check here.

Adding Class Names

Add class names to the root of the slide.

<!-- slide.md -->
<!-- classes: title, main -->

## Hello

/* style.css */

.title {
  color: #3498db;
}
.main {
  background: #f5f5f5;
}

Declaring Section Title

Makes explicit declarations to create a table of contents. and it is also added to sidebar's list. In addition, attaches section-title class to the slide automatically. This page is the title of each chapter, so you use this class to change CSS.

<!-- slide.md -->
<!-- section-title: This is the first slide! -->

## Hello

/* style.css */

.section-title {
  color: #3498db;
  background: #ccc;
}

Generating Table of Contents

Insert titles written as section-title to ToC component automatically.

<!-- toc.md -->

## Contents

<!-- contents -->

Adding Speaker Note

This is a note when you give a speech.

<!-- slide.md -->
<!-- note
This is a speaker note!!
This sentence can be seen when using Presenter Mode.

😍
-->

## Hello!!

Capturing Screen Contents

You need to check the browser name and version because this feature uses WebRTC.

Your screen can be captured on the slide, but this feature can run only in Presenter Mode. And you can choose your local screen or application window or browser tab as output.

This feature will help live coding etc. This feature uses Screen Capture API so this syntax can run on Chrome, Edge, and Firefox.

<!-- slide.md -->

## Capturing screen contents

<!-- screen -->