Markdown Slides Demo

Mon, 15 Dec 2025 00:00:00 +0000

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

Key	Action
`→` / `←`	Navigate slides
`S`	Speaker notes
`F`	Fullscreen
`O`	Overview mode
`ESC`	Exit modes

Get Started

Create a file in content/slides/
Add front matter with type: slides
Write your content in Markdown
Separate slides with ---

Thank You!

Questions?

GitHub: HugoBlox/kit
Docs: docs.hugoblox.com

Built with Markdown Slides

🎨 Branding Your Slides

Add your identity to every slide with simple configuration!

What you can add:

Element	Position Options
Logo	top-left, top-right, bottom-left, bottom-right
Title	Same as above
Author	Same as above
Footer Text	Same + bottom-center

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

📁 Adding Your Logo

Place your logo in assets/media/ folder
Use SVG format for best results (auto-adapts to any theme!)
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  — 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  — footer still visible below!

✅ Quick Reference

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

☝️ This slide uses  — logo still visible above!

Me | Next-generation neural computations