HugoBlox Slides Showcase

A Comprehensive Reference for All Slide Features

Yu-Chao Wang · Your Organization

Agenda

Basic Slide Structure

Slides are separated by --- (horizontal rule):

# First Slide
Content here
---
## Second Slide
More content
---
## Third Slide
And so on...

Each slide supports:

• Headers (#, ##, ###)
• Paragraphs and lists
• Images and media
• Code blocks

Code Syntax Highlighting

Supports 50+ programming languages:

def calculate_accuracy(y_true, y_pred):
    correct = sum(1 for t, p in zip(y_true, y_pred) if t == p)
    return correct / len(y_true) * 100

accuracy = calculate_accuracy([1, 0, 1], [1, 1, 1])
print(f"Accuracy: {accuracy:.1f}%")

interface User {
    name: string;
    role: "admin" | "editor" | "viewer";
}

function greet(user: User): string {
    return `Hello, ${user.name}!`;
}

Mathematical Equations

Full LaTeX support for inline and block math:

Inline math: Einstein’s famous equation is $E = mc^2$.

Block math:

Maxwell’s equations:

Speaker Notes

Add private notes only visible in presenter view:

## My Slide
Visible content here

Note:
- This is a speaker note (press S to view)
- Only you see these in presenter mode
- Perfect for talking points and reminders

Press S during your presentation to open the presenter console.

Hiding Slides

Keep backup slides in your source without showing them:

## Visible Slide
This slide will appear in the presentation.
---
<!-- hide -->
## Hidden Slide
This won't appear but stays in source for reference.
---
## Another Visible Slide
Back to normal presentation flow.

Use cases:

• Backup content for Q&A
• Speaker reference material
• Alternative explanations
• Work-in-progress content

Title Slide (No Branding)

This slide has no branding elements.

Add <!-- no-branding --> at the start of a slide to hide logo, title, author, and footer.

Other options:

• <!-- no-header --> — hides logo + title
• <!-- no-footer --> — hides author + footer

Branding Configuration

Add your logo, title, author, and footer to every slide:

slides:
  branding:
    logo:
      filename: "logo.png"
      position: "top-right"
      width: "60px"
    title:
      show: true
      position: "bottom-left"
    author:
      show: true
      position: "bottom-right"
    footer:
      text: "© 2026 · Your Name"
      position: "bottom-center"

Tip: Use SVG logos with fill="currentColor" for automatic theme adaptation.

Dual Column Layouts

Equal Columns (50/50)

Dual Column: Code + Explanation

class Transformer:
    def __init__(self):
        self.layers = []
        self.attention = MultiHeadAttention()
        self.ffn = FeedForward()
    
    def forward(self, x):
        for layer in self.layers:
            x = layer(x)
        return x

Vertical Slide Navigation

Create hierarchical slides with sub-slides:

## Main Topic
Overview content here
Press ↓ for details
---
{{< slide id="detail-1" >}}
### Detail Level 1
More information
---
{{< slide id="detail-2" >}}
### Detail Level 2
Even more detail
Press → to continue

Perfect for optional deep-dives that viewers can skip or explore.

Themes

Choose from 15+ built-in themes:

Dark Themes:

• black (default) — Clean dark background
• night — Dark blue/purple
• blood — Dark red accent
• league — Gray with orange

Light Themes:

• white — Clean white background
• simple — Minimal white
• beige — Warm beige
• sky — Light blue gradient

Special:

• solarized — Solarized color scheme
• moon — Purple/blue gradient
• serif — Serif font styling

Custom Backgrounds

Add color, image, or video backgrounds to individual slides:

{{< slide background-color="#1e3a8a" >}}
## Blue Background
This slide has a custom blue background!
---
{{< slide background-image="background.jpg" >}}
## Image Background
Content over image
---
{{< slide background-video="video.mp4" >}}
## Video Background
Dynamic background!

Fragment Animations

Reveal content progressively:

Media Embedding

YouTube

{{< youtube dQw4w9WgXcQ >}}

Bilibili

{{< bilibili id="BV1dyXqBaEE5" >}}

Local Video

{{< video src="demo.mp4" controls="yes" >}}

Audio

{{< audio src="interview.mp3" >}}

Mermaid Diagrams

Create flowcharts, sequence diagrams, and more:

slides:
  diagram: true

Tables for Data

Present research results and benchmarks:

Citations & Blockquotes

“The best way to predict the future is to invent it.” — Alan Kay

Recent research by Chen et al. (2024) demonstrates significant improvements.¹

Custom Slide Attributes

Use the slide shortcode for advanced customization:

{{< slide id="custom" class="my-class" data-background-color="#ff0000" >}}
## Custom Slide
This slide has:
- Custom ID for linking
- Custom CSS class
- Red background

Keyboard Shortcuts

Presenter View

Press S to open a separate presenter window showing:

• Current slide
• Next slide preview
• Speaker notes
• Elapsed time
• Slide progress

Tip: Open presenter view on your laptop while mirroring the main presentation to the projector!

Linking Slides to Events

Associate slide decks with conference talks:

1. Create slides: content/slides/neurips-2024/index.md
2. Create event: content/events/neurips-talk/index.md
3. Link them: Add slides: "neurips-2024" to the event front matter

Slides automatically embed on the event page with fullscreen toggle.

PDF Export

Export slides to PDF:

1. Open slides in browser
2. Add ?print-pdf to URL
3. Print to PDF (Ctrl+P / Cmd+P)
4. Save as PDF file

Tip: Use Chrome or Chromium for best results.

Hidden Slide: Backup Content

This slide is hidden from the presentation but remains in the source.

Use cases:

• Backup slides for Q&A
• Detailed technical explanations
• Alternative versions for different audiences
• Work-in-progress content

Thank You!

Questions?

Resources:

Appendix: Full Configuration

slides:
  theme: black
  highlight_style: dracula
  diagram: true
  branding:
    logo:
      filename: "logo.png"
      position: "top-right"
      width: "60px"
    title:
      show: true
      position: "bottom-left"
    author:
      show: true
      position: "bottom-right"
    footer:
      text: "© 2026 · Your Name"
      position: "bottom-center"
  reveal_options:
    controls: true
    progress: true
    slideNumber: true
    hash: true
    history: true
    keyboard: true
    overview: true
    center: true
    touch: true
    loop: false
    fragments: true
    help: true
    transition: "slide"
    menu_enabled: true

1. Chen, S. et al. (2024). Advances in AI. Nature. ↩︎