Create Beautiful Presentations with Markdown

🎯 Why Markdown Slides?

The Problem with Traditional Slides

PowerPoint & Keynote:

• 💸 Expensive licenses or subscriptions
• 🔒 Proprietary file formats (.pptx, .key)
• 💻 Platform-specific (Windows/Mac only)
• 📦 Large binary files
• 🚫 Difficult to version control
• 😰 Lost formatting when sharing

Google Slides:

• ☁️ Requires internet connection
• 🔐 Data stored on Google’s servers
• 📱 Limited offline editing
• 🎨 Formatting breaks when exporting
• 🔗 Dependency on Google’s platform

The Hugo Blox Solution

✨ What You Get

🎨 Professional Design, Zero Effort

• 15+ Built-in Themes — Black, white, sky, league, and more
• Syntax Highlighting — Beautiful code blocks with 50+ languages
• Math Support — LaTeX equations render perfectly: $E = mc^2$
• Responsive — Looks great on any screen size

📝 Write in Plain Text

## My Slide Title

- Point one
- Point two
- Point three

```python
def hello():
    return "World!"
```

---

That’s it! No complex UI, no formatting headaches.

🔄 Edit Anywhere, Anytime

🎯 Advanced Features

Dual Column Layouts:

<div style="display: flex; gap: 2rem;">
  <div style="flex: 1;">Column 1</div>
  <div style="flex: 1;">Column 2</div>
</div>

Fragment Animations:

{{< fragment >}}Appear on click!{{< /fragment >}}

Speaker Notes:

Note: Your private notes here
(visible in presenter view only)

Vertical Slide Stacks: Navigate down for sub-topics!

🚀 Getting Started is Easy

Step 1: Create Your Slides

Create content/slides/my-talk/index.md:

---
title: "My Amazing Talk"
type: slides
slides:
  theme: black
---

# My Amazing Talk
### Your Name

---

## Main Points

- Point 1
- Point 2
- Point 3

---

## Thank You!

Step 2: Link to Your Event

In your event page (content/events/my-event/index.md):

---
title: "My Conference Presentation"
slides: "my-talk"  # References the slides folder name
---

Step 3: Present!

Your slides are automatically:

• ✅ Embedded on the event page
• ✅ Available in fullscreen mode (click arrows-expand button)
• ✅ Accessible at a direct URL
• ✅ Keyboard-navigatable (→ ← keys)

💎 Why Academics & Researchers Love It

Perfect for Research

• Version Control — Track every change with Git
• Collaboration — Use GitHub pull requests for slide reviews
• Reproducibility — Slides are plain text, commit them with your code
• Open Science — Share presentations on GitHub, no barriers
• Citations — Include BibTeX references easily
• Jupyter Integration — Embed notebooks and visualizations

Perfect for Teaching

• Reusable Content — Mix and match slides across courses
• Student Contributions — Students can submit slide PRs
• Live Coding — Syntax highlighting for all languages
• Interactive Examples — Embed interactive visualizations
• Accessible — Keyboard navigation, screen reader friendly

🎬 See It In Action

Live Features to Try

1. Navigate: Use arrow keys (→ ←) or click controls
2. Fullscreen: Click the expand button to go fullscreen
3. Speaker Notes: Press S to open presenter view (try it!)
4. Overview: Press ESC to see all slides at once
5. Search: Press / to search slide content
6. Zoom: Alt+Click to zoom into details

🆚 Comparison

🛠️ Advanced Capabilities

Code Blocks with Syntax Highlighting

import torch
import torch.nn as nn

class Transformer(nn.Module):
    def __init__(self, d_model=512, nhead=8):
        super().__init__()
        self.attention = nn.MultiheadAttention(d_model, nhead)
    
    def forward(self, x):
        return self.attention(x, x, x)[0]

Mathematical Equations

Display equations with LaTeX:

$$
\nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t}
$$

$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Dual Column Layouts

Perfect for before/after comparisons, code + explanation, or image + text:

<div style="display: flex; gap: 2rem;">
  <div style="flex: 1;">Left content</div>
  <div style="flex: 1;">Right content</div>
</div>

See slides 4-6 in the embedded presentation above for live examples!

🎓 For Educators: Teach the Future

Course Integration

courses/
├── ml-101/
│   ├── lecture-1/
│   │   ├── index.md (slides)
│   │   └── notes.md
│   ├── lecture-2/
│   │   └── index.md
│   └── _index.md

Each lecture gets its own slide deck, all version controlled, all editable by students as PRs.

🌍 Join the Community

Get Help & Connect

• 📚 Documentation
• 💬 Discord Community
• 🐛 GitHub Issues
• 🐦 Follow @BuildLore

🚀 Ready to Create?

📖 Additional Resources

Templates & Examples

• Academic Slides Template

Tips & Tricks

Have questions? Check out the FAQ or ask the community!

Want to contribute? Hugo Blox is open source! Contributions welcome.