Markdown Slides

Write in Markdown. Present Anywhere.

What You Can Do

  • Write slides in pure Markdown
  • Include code, math, and diagrams
  • Add speaker notes for presenter view
  • Use progressive reveals for storytelling
  • Customize themes and transitions

Code Highlighting

def fibonacci(n: int) -> int:
    if n <= 1:
        return n
    return fibonacci(n-1) + fibonacci(n-2)
    
# Calculate the 10th Fibonacci number
print(fibonacci(10))  # Output: 55

Mathematical Equations

Einstein’s famous equation:

$$E = mc^2$$

The quadratic formula:

$$x = \frac{-b \pm \sqrt{b^2-4ac}}{2a}$$

Mermaid Diagrams

graph LR A[Markdown] --> B[Hugo] B --> C[Reveal.js] C --> D[Beautiful Slides]

Progressive Reveals

Build your narrative step by step:

First, introduce the concept Then, add supporting details Finally, deliver the conclusion

Speaker Notes

Press S to open presenter view!

Note:

  • These notes are only visible in presenter mode
  • Perfect for talking points and reminders
  • Supports Markdown formatting
  • Add timing cues and references here

Dual Column Layout

Benefits

  • Open source
  • Version control
  • No vendor lock-in
  • Works offline

Use Cases

  • Tech talks
  • Academic papers
  • Team updates
  • Training sessions

Custom Backgrounds

Slides can have custom colors or images.

Use {{< slide background-color="#hex" >}}

Keyboard Shortcuts

KeyAction
→ / ←Navigate slides
SSpeaker notes
FFullscreen
OOverview mode
ESCExit modes

Get Started

  1. Create a file in content/slides/
  2. Add front matter with type: slides
  3. Write your content in Markdown
  4. Separate slides with ---

Thank You!

Questions?

  • GitHub:
  • Docs:

Built with Markdown Slides

🎨 Branding Your Slides

Add your identity to every slide with simple configuration!

What you can add:

ElementPosition Options
Logotop-left, top-right, bottom-left, bottom-right
TitleSame as above
AuthorSame as above
Footer TextSame + bottom-center

Edit the branding: section in your slide’s front matter (top of file).

  1. Place your logo in assets/media/ folder
  2. Use SVG format for best results (auto-adapts to any theme!)
  3. Add to front matter:
branding:
  logo:
    filename: "your-logo.svg"  # Must be in assets/media/
    position: "top-right"
    width: "60px"

Tip: SVGs with fill="currentColor" automatically match theme colors!

📝 Title & Author Overlays

Show presentation title and/or author on every slide:

branding:
  title:
    show: true
    position: "bottom-left"
    text: "Short Title"  # Optional: override long page title
  
  author:
    show: true
    position: "bottom-right"

Author is auto-detected from page front matter (author: or authors:).

📄 Footer Text

Add copyright, conference name, or any persistent text:

branding:
  footer:
    text: "© 2024 Your Name · ICML 2024"
    position: "bottom-center"

Tip: Supports Markdown! Use [Link](url) for clickable links.

🔇 Hiding Branding Per-Slide

Sometimes you want a clean slide (title slides, full-screen images).

Add this comment at the start of your slide content:

<!-- no-branding -->
## My Clean Slide

Content here...

☝️ This slide uses <!-- no-branding --> — notice no logo or overlays!

🔇 Selective Hiding

Hide just the header (logo + title):

<!-- no-header -->

Or just the footer (author + footer text):

<!-- no-footer -->

☝️ This slide uses <!-- no-header --> — footer still visible below!

✅ Quick Reference

CommentHides
<!-- no-branding -->Everything (logo, title, author, footer)
<!-- no-header -->Logo + Title overlay
<!-- no-footer -->Author + Footer text

☝️ This slide uses <!-- no-footer --> — logo still visible above!

Markdown Slides Demo
© 2026 HugoBlox