# Welcome to the Demo Presentation Press **?** for keyboard shortcuts Note: Welcome! This is a speaker note. Press 'S' to see the speaker view with notes. This demo will show you all the features of the presentation system. --- ## Navigation Basics - Use **Arrow Keys** or **Space** to navigate - **Down Arrow** takes you to vertical slides - Try pressing **↓** now! Note: Explain that horizontal slides are main topics, vertical slides are details. This helps organize complex presentations hierarchically. -- ### Vertical Slide 1 This is a vertical slide! Notice the down arrow indicator. You can go deeper into a topic without moving to the next main section. Note: Vertical slides are perfect for diving into details without cluttering the main flow. -- ### Vertical Slide 2 Multiple vertical slides create a stack. - Detail 1 - Detail 2 - Detail 3 Press **→** to continue to the next main topic. Note: You can have as many vertical slides as needed. Great for optional deep-dives. --- ## Code Highlighting Syntax highlighting works automatically: ```javascript function greet(name) { console.log(`Hello, ${name}!`); return true; } greet("World"); ``` Note: Code blocks are automatically highlighted. Supports multiple languages including JavaScript, Python, Go, Rust, etc. -- ### More Code Examples Python example: ```python def fibonacci(n): if n <= 1: return n return fibonacci(n-1) + fibonacci(n-2) print(fibonacci(10)) ``` Note: The syntax highlighting uses the Monokai theme which works well on dark backgrounds. --- ## Markdown Features ### Text Highlighting You can use ==highlighted text== to emphasize important points! **Bold**, _italic_, ~~strikethrough~~, and `inline code` > Blockquotes are also supported > for longer passages Note: Markdown rendering supports most common formatting options. -- ### Tables Tables work great in presentations: | Feature | Status | Priority | | ------- | ------- | -------- | | Slides | ✅ Done | High | | Drawing | ✅ Done | High | | Tables | ✅ Done | Medium | | Mermaid | 🔄 Next | Medium | Note: Tables are automatically styled and responsive. --- ## Drawing Tools Try these interactive features: - Press **B** for chalkboard mode (press B again to exit) - Press **C** for canvas mode (press C again to exit) - **Left-click** to draw/write - Click **color buttons** on toolbar to change colors - **X** to clear current canvas - **BACKSPACE** to reset all drawings - **D** to download your drawings **Important**: If you get stuck in eraser mode, press **B** or **C** to toggle off drawing mode completely, then re-enter! Note: Drawing tools are great for live presentations. You can highlight important points, draw diagrams, or add notes during the presentation. Look for the drawing toolbar buttons in the bottom-left corner when you activate drawing mode. Toggle the mode off and on if tools get stuck. -- ### Drawing Tips **Chalkboard (B):** - Clean slate for drawing - Chalk effect on dark background - Great for explaining concepts from scratch **Canvas (C):** - Draw directly on slides - Marker effect - Perfect for annotations **Controls:** - Color buttons appear when drawing is active - Right-click acts as eraser - Toolbar in bottom-left corner Perfect for: - Live coding sessions - Explaining diagrams - Brainstorming - Highlighting important points Note: The drawings are temporary and won't be saved unless you download them. This keeps presentations clean for the next viewing. The color buttons and toolbar appear automatically when you activate drawing mode. --- ## Advanced Features Multiple powerful tools at your fingertips: Note: This slide demonstrates that you can have complex layouts with multiple features working together. -- ### Overview Mode - Press **O** or **ESC** for overview - See all slides at once - Click any slide to jump to it Note: Overview mode is excellent for navigating long presentations or showing the big picture. -- ### Zoom Feature - Hold **Alt** and **Click** anywhere to zoom - Great for focusing on details - **Alt + Click** again to zoom out Note: Zoom is particularly useful for code snippets, diagrams, or any detailed content. -- ### Search - Press **Ctrl + Shift + F** to search - Find content across all slides - Quick navigation to specific topics Note: Search is powerful for Q&A sessions or when you need to quickly reference something. --- ## Speaker Notes Every slide can have speaker notes! Press **S** right now to open speaker view. Note: Speaker view shows: - Current slide - Next slide preview - Your notes (only visible to you) - Timer - Slide number This is perfect for presentations where you need a second screen or want to keep your talking points private. -- ### Notes Best Practices Speaker notes are great for: - Talking points and reminders - Time estimates per slide - Questions to ask the audience - Additional context not on slides Note: Keep notes concise but informative. They should guide you without needing to read word-for-word. Practice with the speaker view before your actual presentation. --- ## Nested Vertical Example This section has multiple levels ↓ Go down to explore Note: This demonstrates a more complex vertical navigation structure. -- ### Level 1: Introduction First level of detail ↓ Keep going Note: You can create deep hierarchies when needed. -- ### Level 2: Details Second level of detail More in-depth information ↓ One more level Note: Don't go too deep - 3-4 levels max is usually enough. -- ### Level 3: Deep Dive Third level of detail This is getting very specific! → Back to main flow Note: This is about as deep as you should go. Remember that attendees need to follow along. --- ## Export Options You can export this presentation: 1. Add `?print-pdf` to the URL 2. Print or save as PDF 3. Share offline Example: `localhost:1313/slides/demo-presentation/?print-pdf` Note: PDF export maintains most of the formatting but loses interactivity. Good for handouts or archival purposes. --- ## Diagrams with Mermaid Create flowcharts, sequence diagrams, and more: ```mermaid graph LR A[Start] --> B{Decision} B -->|Yes| C[Action 1] B -->|No| D[Action 2] C --> E[End] D --> E ``` Note: Mermaid diagrams are great for visualizing processes, architectures, and flows directly in your slides. --- ## Themes Available Current theme: **black** Other themes you can try: - black (default) - white - league - beige - sky - night - serif - simple - solarized Change in frontmatter: `theme: "solarized"` Note: Each theme has its own color scheme and typography. Pick one that matches your brand or presentation style. --- ## Transitions Current transition: **slide** Available transitions: - none - fade - slide - convex - concave - zoom Change in frontmatter: `transition: "zoom"` Note: Transitions add visual interest but don't overuse them. Subtle is usually better for professional presentations. --- ## Quick Reference Key shortcuts to remember: | Key | Action | | --- | ------------ | | ? | Help | | S | Speaker view | | O | Overview | | B | Chalkboard | | C | Canvas | | F | Fullscreen | Note: Print this slide or keep it handy during presentations. The ? key will show you all shortcuts anytime. --- ## Thank You! Now you know all the features! Start creating your own presentations with markdown. Press **O** to see all slides in overview mode. Note: Encourage questions. Remind them that: - All slides are in markdown - Easy to version control with git - Can be edited with any text editor - Full Reveal.js power available This presentation system is ready for production use!