Creating Slides with Malware & Monsters Theme

Build RevealJS presentations from scratch using the M&M design system

Overview

This guide explains how to create new RevealJS slide presentations using the Malware & Monsters unified theme. You’ll learn the required structure, available features, and best practices for creating consistent, professional presentations.

What you’ll learn:

  • How to set up a new slide deck with proper theme configuration
  • Essential YAML frontmatter settings
  • Available design features (backgrounds, transitions, speaker notes)
  • How to use Malmon cards and other M&M components in slides
  • Theme toggle and navigation features

Time to read: 15-20 minutes

Quick Start: Create Your First Slide Deck

Step 1: Create Directory Structure

Create a new directory for your slides:

cd slides/
mkdir your-presentation-name
cd your-presentation-name

Step 2: Create Slide File

Create a new file named slides.qmd:

touch slides.qmd

Step 3: Add YAML Frontmatter

Open slides.qmd and add this minimal configuration:

---
title: "Your Presentation Title"
subtitle: "Your subtitle here"
author: "Your Name"
date: today
format:
  revealjs:
    theme:
      - ../../_scss/revealjs/_unified-reveal-bridge.scss
      - ../../_scss/_slides-nav.scss
filters:
  - ../../shared/filters/malmon-card-filter.lua
---

Step 4: Add Your First Slide

After the frontmatter, add slides using markdown:

# Your First Slide {.center}

Content goes here

---

## Second Slide

- Bullet point 1
- Bullet point 2
- Bullet point 3

Step 5: Build and Preview

From the repository root:

make slides

Open the generated HTML file in your browser:

_output/slides/your-presentation-name/slides.html

Required Configuration

Essential YAML Frontmatter

Minimum required settings:

---
title: "Presentation Title"
format:
  revealjs:
    theme:
      - ../../_scss/revealjs/_unified-reveal-bridge.scss
      - ../../_scss/_slides-nav.scss
---

Recommended full configuration:

---
title: "Presentation Title"
subtitle: "Presentation Subtitle"
author: "Your Name"
date: today
format:
  revealjs:
    # Theme files - REQUIRED
    theme:
      - ../../_scss/revealjs/_unified-reveal-bridge.scss
      - ../../_scss/_slides-nav.scss

    # Transitions
    transition: slide
    transition-speed: fast

    # Display options
    slide-number: true
    controls: true
    progress: true
    center: true

    # Navigation
    hash: true
    history: false

    # Interaction
    touch: true
    loop: false
    fragments: true

    # Optional: Chalkboard for drawing
    chalkboard:
      theme: whiteboard
      boardmarker-width: 3

# Filters for M&M components
filters:
  - ../../shared/filters/malmon-card-filter.lua
---

Theme Files Explained

_unified-reveal-bridge.scss:

  • Core M&M design system variables
  • Light and dark mode theming
  • Typography and spacing
  • Color palette

_slides-nav.scss:

  • Cross-navigation overlay
  • Theme toggle button
  • Keyboard hint display

Why both are required: These files provide the complete M&M theme including design tokens, components, and interactive features.

Creating Slides

Basic Slide Syntax

Horizontal slides (main sections):

# Slide Title

Content here

---

## Another Slide

More content

---

Vertical slides (subsections):

# Main Topic

---

## Subtopic 1

Content

---

## Subtopic 2

More content

Navigate: ← β†’ for horizontal, ↑ ↓ for vertical.

Slide Classes and Styling

Center content:

# Centered Slide {.center}

All content will be vertically and horizontally centered

Custom background colors:

## Colored Slide {background-color="#e74c3c"}

Use any hex color code

M&M brand colors:

{background-color="#2c3e50"}  # Primary (dark blue-gray)
{background-color="#3498db"}  # Accent (blue)
{background-color="#e74c3c"}  # Alert (red)
{background-color="#27ae60"}  # Success (green)
{background-color="#9b59b6"}  # Purple

Background images:

## Slide Title {background-image="path/to/image.jpg"}

Content over image

Speaker Notes

Add private notes for presenters (visible in speaker view only):

## Slide Title

Public content here

::: {.notes}
These are private speaker notes that only appear in presenter view (press S).
Use these for facilitation guidance, timing reminders, or key talking points.
:::

Incremental Content

Reveal list items one at a time:

Default behavior (set in _quarto.yml): All lists are incremental.

Override to show all at once:

::: {.nonincremental}
- All items
- Appear
- Immediately
:::

Fragments (custom reveal):

::: {.fragment}
This appears after a click
:::

::: {.fragment}
This appears next
:::

Using M&M Components

Malmon Cards

Display malware creature cards in slides:

::: {.malmon-card name="FakeBat" type="Loader"}
**Description:** Entry-level pay-per-install loader malware

**Signature Move:** Downloads additional malware payloads

**MITRE ATT&CK:**

- Initial Access
- Persistence
:::

Available Malmon types:

  • Loader
  • Trojan
  • Ransomware
  • Wiper
  • RAT (Remote Access Trojan)
  • Rootkit
  • Botnet
  • APT

Columns Layout

Two-column layout:

:::: {.columns}

::: {.column width="50%"}
Left column content
:::

::: {.column width="50%"}
Right column content
:::

::::

Custom widths:

:::: {.columns}

::: {.column width="30%"}
Narrow column
:::

::: {.column width="70%"}
Wide column
:::

::::

Callout Boxes

::: {.callout-note}
## Note
This is important information
:::

::: {.callout-tip}
## Tip
Helpful advice here
:::

::: {.callout-warning}
## Warning
Be careful of this
:::

Interactive Features

Theme Toggle

Built-in light/dark mode:

The theme automatically includes a toggle button (top right) and keyboard shortcut (T key).

How it works:

  • Button: Click sun/moon icon
  • Keyboard: Press T
  • Preference saved in localStorage
  • Auto-detects system preference on first load

No configuration needed - just ensure _slides-nav.scss is included in theme list.

Speaker View

Press S to open presenter view with:

  • Current slide
  • Next slide preview
  • Speaker notes
  • Timer

Player-Safe Mode

For scenario slides, press P to enable player-safe mode (hides IM-only slides).

Note: This feature is specific to scenario slides and may not apply to general presentations.

Advanced Customization

Custom CSS

Add presentation-specific styling:

format:
  revealjs:
    theme:
      - ../../_scss/revealjs/_unified-reveal-bridge.scss
      - ../../_scss/_slides-nav.scss
      - custom-styles.scss  # Your custom file

Create custom-styles.scss in your presentation directory:

// Custom overrides
.reveal h1 {
  font-size: 3em;
  color: var(--mm-color-primary);
}

.custom-slide-class {
  background: linear-gradient(to right, #2c3e50, #3498db);
}

Custom JavaScript

Add interactive features:

format:
  revealjs:
    include-after-body:
      - custom-script.js

Transition Effects

Available transitions:

  • none - No transition
  • fade - Cross-fade
  • slide - Slide horizontally
  • convex - Convex rotation
  • concave - Concave rotation
  • zoom - Zoom in/out

Set globally:

format:
  revealjs:
    transition: slide
    transition-speed: fast  # default, fast, or slow

Override per slide:

## Slide Title {transition="zoom"}

This slide zooms in

Best Practices

Content Guidelines

Slide text:

  • Maximum 6 bullet points per slide
  • Maximum 6-7 words per line
  • Use large fonts (let Quarto handle sizing)
  • Avoid walls of text

Images:

  • Use high-resolution images (will scale down)
  • Prefer 16:9 aspect ratio (matches slide dimensions)
  • Optimize file size (keep under 500KB per image)

Speaker notes:

  • Write complete facilitation guidance
  • Include timing estimates
  • Note audience interaction points
  • Reference handouts or resources

Design Consistency

Use M&M brand colors:

  • Rely on CSS variables when possible
  • Don’t introduce random colors
  • Stick to established palette

Typography:

  • Let theme handle font sizing
  • Use semantic heading levels (# ## ###)
  • Don’t manually set font sizes unless necessary

Spacing:

  • Trust Quarto’s default spacing
  • Use --- for slide breaks (not manual spacing)
  • Let CSS handle margins and padding

Performance

Keep presentations fast:

  • Limit total slides to under 100
  • Optimize images before adding
  • Avoid heavy animations
  • Test on slower hardware

Build optimization:

# Full rebuild when changing structure
make clean slides

# Quick rebuild during development
make slides

Troubleshooting

Theme Not Loading

Symptoms: Slides appear with default RevealJS theme, not M&M styling.

Solutions:

  1. Check theme paths:

    • Ensure ../../_scss/revealjs/_unified-reveal-bridge.scss exists
    • Verify relative path from your slide directory
    • Use ls -la ../../_scss/revealjs/ to confirm files exist

  2. Rebuild from scratch:

    make clean slides

  3. Check Quarto console output for SCSS compilation errors

Malmon Cards Not Rendering

Symptoms: Malmon card divs show as plain text.

Solutions:

  1. Verify filter is included:

    filters:
  - ../../shared/filters/malmon-card-filter.lua

  2. Check filter path:

    ls -la ../../shared/filters/malmon-card-filter.lua

  3. Rebuild:

    make slides

Theme Toggle Not Working

Symptoms: No toggle button, T key does nothing.

Solutions:

  1. Verify _slides-nav.scss is included in theme list
  2. Check JavaScript loaded:
    • Open browser console (F12)
    • Look for errors
    • Verify slides-theme-toggle.js loaded
  3. Hard refresh: Ctrl+F5 (Windows) or Cmd+Shift+R (Mac)

Slides Build But Look Broken

Symptoms: Layout issues, overlapping content, missing styles.

Solutions:

  1. Clear browser cache and hard refresh
  2. Check YAML syntax (indentation matters!)
  3. Validate markdown syntax (especially div blocks)
  4. Test in different browser (Chrome recommended)

Examples and Templates

Example: Complete Presentation

See slides/malware_village_workshop/slides.qmd for a full working example with:

  • Complete YAML configuration
  • Various slide layouts
  • Speaker notes usage
  • Color backgrounds
  • Incremental lists
  • Malmon cards

Minimal Template

Copy this to start a simple presentation:

---
title: "My Presentation"
subtitle: "Subtitle Here"
author: "Your Name"
date: today
format:
  revealjs:
    theme:
      - ../../_scss/revealjs/_unified-reveal-bridge.scss
      - ../../_scss/_slides-nav.scss
    transition: slide
    slide-number: true
filters:
  - ../../shared/filters/malmon-card-filter.lua
---

# Introduction {.center}

Welcome to the presentation

---

## Main Topic

- Key point 1
- Key point 2
- Key point 3

::: {.notes}
Facilitate discussion here
:::

---

## Conclusion {.center background-color="#27ae60"}

Thank you!

Scenario Slide Template

For M&M scenario presentations:

---
title: "Scenario Name"
subtitle: "Tier X - Organization Type"
author: "IM Name"
format:
  revealjs:
    theme:
      - ../../_scss/revealjs/_unified-reveal-bridge.scss
      - ../../_scss/_slides-nav.scss
    slide-number: true
    controls: true
    progress: true
filters:
  - ../../shared/filters/malmon-card-filter.lua
---

# Scenario: Title {.center background-color="#2c3e50"}

---

## Scenario Hook

Describe the incident setup

---

## Investigation Phase

Clues for players to discover

---

::: {.im-only}
## IM Notes

Private facilitation guidance

::: {.notes}
These slides only visible in overview, hidden in player-safe mode
:::
:::

Build Commands Reference

# Build all slides
make slides

# Build and serve for presentation
make present

# Clean and rebuild
make clean slides

# Full build (includes PDFs)
make all

# Quick development build (HTML + slides only)
make quick

Malware & Monsters | Creating Slides Guide Build professional RevealJS presentations with unified M&M theming