How we teach ›Lesson Types
Slides

How we teach

Introduction to GraphAcademy’s Learning Philosophy

Developing a GraphAcademy course

Lesson Types

Releasing courses

Monitoring courses

Slides

Introduction

GraphAcademy supports a slide view for instructor-led training.

In this lesson, you will learn about AsciiDoc slide formatting and PDF slides, when to use each, and how to implement them effectively.

Slides in GraphAcademy

GraphAcademy supports two types of slides:

  • AsciiDoc slide formatting - Embedded presentation-style formatting for instructor-led training

  • PDF slides - Supplementary visual materials that learners can view alongside lessons

AsciiDoc slide formatting

Slide formatting transforms lesson content into presentation-style slides with a 16:9 aspect ratio for instructor-led training.

What are slides?

Slides are implemented using AsciiDoc role markers ([.slide]) applied to section headers.

Each slide represents a single concept that can be displayed independently during training sessions.

Important: Slides are ONLY for theory lessons (:type: lesson). Challenge lessons are designed for learners to read independently, so they should NOT have slide formatting.

Basic syntax

Mark a section as a slide:

asciidoc
[.slide]
== Section Title

Content goes here. This will be rendered as a single slide.

Slide modifiers

Slides support various modifiers that can be chained together:

  • .discrete - Removes the section from the table of contents/navigation

  • .col-2 - Creates a two-column layout for content and images

  • .reverse - Image appears above text in linear reading, but stays on right in slide view

  • .overflow-hidden - Hides overflow content

Two-column layouts

For content with images, use .col-2 to create a two-column layout:

asciidoc
[.slide.col-2]
== Section Title

[.col]
====
Text content goes in the first column.
====

[.col]
====
image::images/screenshot.png[Alt text]
====

When to use slide formatting

Text-only sections:

  • Sections containing only text, lists, or code blocks

  • Use [.slide] without modifiers

Text + image sections:

  • Medium to large images alongside short to medium text (1-4 paragraphs)

  • Use [.slide.col-2]

Context-first images:

  • Images that provide essential context and should appear above text in linear reading

  • Use [.slide.col-2.reverse]

  • Image displays above text in flow, but on the right in 16:9 slide view

Subsections:

  • Use [.slide] for major concepts that deserve navigation visibility

  • Use [.slide.discrete] for sub-topics that would clutter navigation

Hiding complex content

Use .transcript-only to hide content that doesn’t work well in slide format:

asciidoc
[.slide]
== Data Filters

[.transcript-only]
====
The following filters are available:
====

[cols="2,4,1,3", options="header"]
|===
| Filter | Description | Type | Example
| ... complex table ...
|===

Complex tables and detailed tip boxes are better discussed verbally during presentations.

Best practices for slide formatting

  • One concept per slide

  • Consistency throughout the lesson

  • Balance content in two-column layouts

  • Test readability in 16:9 format

  • Use .discrete for sub-topics

  • Keep slides focused on key concepts

PDF slides

PDF slides provide supplementary visual content that learners can view alongside lessons.

Configuration

Enable PDF slides with the :slides: attribute in the lesson frontmatter:

asciidoc
= Lesson Title
:type: lesson
:order: 1
:slides: true

Generated slide files

When you run npm run generate:slides, a slides.pdf file is automatically created in your course root directory:

asciidoc/courses/your-course/
  - course.adoc
  - slides.pdf          <- Generated from slide markup
  - modules/

The PDF is generated from your AsciiDoc slide formatting and becomes available when :slides: true is set.

Keyboard shortcuts

GraphAcademy provides keyboard shortcuts for navigating PDF slides:

  • Cmd+/ (Mac) or Ctrl+/ (Windows/Linux) - Toggle slides panel

  • Prev/Next buttons - Navigate between slides

  • Cmd+Arrow (Mac) or Ctrl+Arrow (Windows/Linux) - Navigate between lessons

When to generate PDF slides

Generate PDF slides when:

  • Creating instructor-led training materials

  • Learners need downloadable presentation decks

  • Content should be available offline

  • Providing workshop or conference materials

Building PDF slides

PDF slides are built automatically from your AsciiDoc slide markup:

bash
npm run generate:slides

This command:

  • Reads lessons with [.slide] markup

  • Generates 16:9 PDF presentations

  • Places slides.pdf files in course directories

  • Creates downloadable slide decks for learners

The generated PDFs match your slide formatting exactly, providing learners with a downloadable version of the presentation.

Workflow for creating slides

The typical workflow for creating slides in GraphAcademy:

  1. Write lesson content - Create your lesson in AsciiDoc

  2. Add slide markup - Apply [.slide] markers to sections

  3. Test locally - View slides in development environment

  4. Generate PDFs - Run npm run generate:slides

  5. Enable slides - Set :slides: true in lesson frontmatter

  6. Deploy - PDF becomes available to learners automatically

Both the online slide view and downloadable PDF are generated from the same AsciiDoc markup, ensuring consistency.

Summary

In this lesson, you learned about two types of slides in GraphAcademy: AsciiDoc slide formatting for instructor-led training and PDF slides for supplementary materials.

AsciiDoc slides use [.slide] markers to format content in 16:9 presentation style, while PDF slides provide external visual materials.

You now understand when to use each approach and how to implement them effectively.

Chatbot

How can I help you today?