Canvas- Marp Theme -

Simple and minimal Marp theme

Canvas v0.4.1

Table of Contents

  1. Slide Patterns
  2. Column Layout
  3. Components
Canvas v0.4.1

Slide Patterns

Canvas v0.4.1

Slide Patterns

Use <!-- _class: style-name --> to switch styles for each page.

Style Purpose
title Cover page
section Section divider
toc Table of contents
agenda Agenda / topics list
display Emphasis display
Canvas v0.4.1

Agenda Example

  • Main Topic 1
    • Detailed explanation goes here
    • Additional information
  • Main Topic 2
    • Detailed explanation goes here
  • Main Topic 3
Canvas v0.4.1

Display: large text emphasis

Canvas v0.4.1

Column Layout

Canvas v0.4.1

2-Column Layout

Left Column

Specify <!-- _class: cols --> and use <div class="col"> for each column.

  • Simple syntax
  • Flexible layout

Right Column

Columns are equally distributed by default.

  • Item A
  • Item B
  • Item C
Canvas v0.4.1

Image & Text Layout

Use col-N (N = 1-10) for ratio-based widths.

  • col-4 for the image
  • col-6 for the text

This allows flexible image-text combinations.

Canvas v0.4.1

Flex Alignment

Combine with flex utilities for alignment control.

<!-- _class: cols items-center -->

Content is vertically centered relative to the image.

Canvas v0.4.1

Components

Canvas v0.4.1

Headings

H1 Heading

H2 Heading (Primary Color)

H3 Heading

H4 Heading

Canvas v0.4.1

Text & Decoration

Bold text for emphasis.

Italic text for nuance.

A sentence with highlighted text using the accent color.

Blockquotes for citing or calling attention to important notes.

Canvas v0.4.1

Lists

  • Unordered list item
    • Nested item
    • Another nested item
  • Second item
  • Third item
  1. Ordered list item
  2. Second item
  3. Third item
Canvas v0.4.1

Table

Feature white-canvas black-canvas
Background White Black
Text color Dark Light
Syntax highlighting Light Dark
Canvas v0.4.1

Code

Inline code: const theme = 'canvas'

// Code block with syntax highlighting
function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Canvas'));
Canvas v0.4.1

Thank you!

Canvas v0.4.1