Blox Reference Gallery

Fri, 03 Apr 2026 00:00:00 +0000

HugoBlox Slides Showcase

Fri, 03 Apr 2026 00:00:00 +0000

HugoBlox Slides Showcase

A Comprehensive Reference for All Slide Features

Yu-Chao Wang · Your Organization

Agenda

1. Basic Structure

2. Code & Math

3. Layouts & Branding

4. Interactive Features

5. Advanced Topics

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:

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

Maxwell’s equations:

$$\oint_{\partial \Sigma} \vec{E} \cdot d\vec{l} = -\frac{d}{dt} \iint_{\Sigma} \vec{B} \cdot d\vec{A}$$

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  at the start of a slide to hide logo, title, author, and footer.

Other options:

 — hides logo + title
 — 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)

Before

Slow: 2.5s
Memory: 4GB
Cost: $100/mo

After

Fast: 0.3s ✅
Memory: 512MB ✅
Cost: $15/mo ✅

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

Key Points

Multi-head attention
Feed forward network
Residual connections
Layer normalization

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:

First point appears. Then this point appears. Finally, this point appears. This point is highlighted in red!

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

graph LR A[Question] --> B{Hypothesis} B -->|Valid| C[Experiment] B -->|Invalid| D[Revise] C --> E[Analyze] E --> F{Significant?} F -->|Yes| G[Publish] F -->|No| D

Tables for Data

Present research results and benchmarks:

Model	Accuracy	Latency	Memory
GPT-3	87.3%	450ms	4GB
GPT-4	92.1%	890ms	8GB
Ours	95.8%	320ms	2GB

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

Key	Action
`→` `←`	Navigate slides (horizontal)
`↓` `↑`	Navigate substeps (vertical)
`Space`	Next slide
`S`	Open speaker notes
`F`	Fullscreen mode
`ESC`	Exit fullscreen / Overview mode
`O`	Overview mode (see all slides)
`/`	Search slides
`?`	Show keyboard help

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:

Create slides: content/slides/neurips-2024/index.md
Create event: content/events/neurips-talk/index.md
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:

Open slides in browser
Add ?print-pdf to URL
Print to PDF (Ctrl+P / Cmd+P)
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

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

HugoBlox | Yu-Chao (Curtis) Wang's Personal Website

Blox Reference Gallery

HugoBlox Slides Showcase

HugoBlox Slides Showcase

A Comprehensive Reference for All Slide Features

Agenda

1. Basic Structure

2. Code & Math

3. Layouts & Branding

4. Interactive Features

5. Advanced Topics

Basic Slide Structure

Code Syntax Highlighting

Mathematical Equations

Speaker Notes

Hiding Slides

Title Slide (No Branding)

Branding Configuration

Dual Column Layouts

Equal Columns (50/50)

Before

After

Dual Column: Code + Explanation

Key Points

Vertical Slide Navigation

Themes

Custom Backgrounds

Fragment Animations

Media Embedding

YouTube

Bilibili

Local Video

Audio

Mermaid Diagrams

Tables for Data

Citations & Blockquotes

Custom Slide Attributes

Keyboard Shortcuts

Presenter View

Linking Slides to Events

PDF Export

Hidden Slide: Backup Content

Thank You!

Questions?

Appendix: Full Configuration