Presentations & Slides

此内容尚不支持你的语言。

Create stunning presentations using simple Markdown. Present at conferences, teach courses, or share your research with slides that you can edit anywhere, version control with Git, and present with just a browser.

Why Markdown Slides?

🆓 Free Forever

No expensive licenses or subscriptions. Open source and completely free.

🔓 No Vendor Lock-In

Plain Markdown files. Edit in any text editor. Not tied to PowerPoint, Keynote, or Google.

📝 Version Control

Track changes with Git, collaborate with GitHub pull requests, maintain presentation history.

🌍 Edit Anywhere

Use Lore Studio, VS Code, Obsidian, or even Notepad. Your slides, your tools.

🎨 Professional Design

15+ built-in themes, syntax highlighting for 50+ languages, LaTeX math support.

🔮 Future-Proof

Plain text format will never become obsolete. Works today, works in 20 years.

Installation

Install the Reveal.js Plugin

Add the blox-plugin-reveal module to your site’s config/_default/module.yaml:

imports:
  - path: github.com/HugoBlox/kit/modules/blox-tailwind
  - path: github.com/HugoBlox/kit/modules/blox-plugin-reveal

Initialize Hugo Modules

Run in your site’s root directory:
Terminal window
```
hugo mod get -u
hugo mod tidy
```
提示
If you don’t have a go.mod file yet, first run:
Terminal window
hugo mod init github.com/USERNAME/my-site

Verify Installation

Check that the module appears in your go.mod:

module github.com/USERNAME/my-site

go 1.19

require (
  github.com/HugoBlox/kit/modules/blox-tailwind v0.X.X
  github.com/HugoBlox/kit/modules/blox-plugin-reveal v0.X.X
)

Quick Start

Create Your First Slide Deck

Create a new file at content/slides/my-first-talk/index.md:

---
title: "My First Presentation"
date: 2024-01-15
type: slides

slides:
  theme: black
  highlight_style: dracula
---

# My First Presentation
### Your Name · Your Organization

---

## Overview

- First point
- Second point
- Third point

---

## Conclusion

Thank you for your attention!

**Questions?**

Preview Your Slides

Start your Hugo server:
Terminal window
```
hugo server
```
Visit: http://localhost:1313/slides/my-first-talk/
Present!

Press F for fullscreen or use the embedded slides in your event pages.

Slide Features

Basic Slide Structure

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

# First Slide

Content here

---

## Second Slide

More content

---

## Third Slide

And so on...

Code Syntax Highlighting

Display beautiful code blocks with 50+ language support:

```python
def calculate_accuracy(y_true, y_pred):
    correct = sum(1 for true, pred in zip(y_true, y_pred) if true == pred)
    return correct / len(y_true) * 100
```

Supported languages: Python, JavaScript, R, Julia, Go, Rust, C++, Java, and more.

Mathematical Equations

Write LaTeX equations inline or in blocks:

Inline math:

Einstein's famous equation is $E = mc^2$.

Block math:

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

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

Hide slides from the presentation while keeping them in your source:

## Visible Slide

This slide will appear in the presentation.

---
<!-- hide -->
## Hidden Slide

This slide won't appear but stays in source for reference.

Perfect for:
- Backup slides in case of questions
- Speaker-only reference material
- Work-in-progress content
- Alternative explanations

---

## Another Visible Slide

Back to normal presentation flow.

Why hide slides?

Backup content: Keep extra slides ready without cluttering the main flow
Speaker reference: Private notes and detailed information
Flexible presentations: Same source for different audiences or time constraints
Version control: Keep all content versions in one file

Hidden slides remain in your Markdown source but won’t appear during the presentation. Perfect for maintaining comprehensive slide decks while delivering focused presentations.

Advanced Layouts

Dual Column Slides

## Comparison

<div class="r-hstack">

<div>

### Before

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

</div>

<div>

### After

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

</div>

</div>

## Code + Explanation

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

<div style="flex: 2;">

\`\`\`python
class Transformer:
    def __init__(self):
        self.layers = []
\`\`\`

</div>

<div style="flex: 1;">

### Key Points

- Multi-head attention
- Feed forward network
- Residual connections

</div>

</div>

## Results

<div style="display: flex; gap: 2rem; align-items: center;">

<div style="flex: 1;">

![Research Diagram](diagram.png)

</div>

<div style="flex: 1;">

### Findings

- 95% accuracy
- 10x faster
- 50% cost reduction

</div>

</div>

Create hierarchical slides by navigating down for details:

## 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

Visual Customization

Themes

Choose from 15+ built-in themes:

slides:
  theme: black  # black, white, league, sky, beige, simple, serif, blood, night, moon, solarized

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

white - Clean white background
simple - Minimal white
beige - Warm beige
sky - Light blue gradient

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

Code Highlighting Themes

slides:
  highlight_style: dracula  # dracula, monokai, github, etc.

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!

Interactive Features

Fragment Animations

Reveal content progressively (on click/keypress):

## Step-by-Step

{{< fragment >}}First appears{{< /fragment >}}

{{< fragment >}}Then this{{< /fragment >}}

{{< fragment >}}Finally this{{< /fragment >}}

{{< fragment class="highlight-red" >}}Highlighted!{{< /fragment >}}

Media Embedding

## Demo Video

{{< youtube dQw4w9WgXcQ >}}

## Recorded Demo

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

## Podcast Excerpt

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

## Bilibili Video

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

Mermaid Diagrams

Create flowcharts, sequence diagrams, and more from text:

# Enable in frontmatter:
slides:
  diagram: true

Then use Mermaid syntax:

## Research Workflow

```mermaid
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
```

Presenter Features

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

Linking Slides to Events

Associate slide decks with conference talks or events:

Create Your Slides

content/slides/neurips-2024/index.md

Create Your Event

content/events/neurips-talk/index.md:

---
title: "My Conference Talk"
event: "NeurIPS 2024"
date: "2024-12-10T14:00:00Z"

# Link to your slides folder name
slides: "neurips-2024"
---

Talk details and abstract here...

Result
- Slides automatically embed on the event page
- Fullscreen toggle button (top-right)
- Link to open slides in new tab
- All event metadata displayed

Configuration

Full Configuration Options

---
title: "My Presentation"
date: 2024-01-15
type: slides

# Slide settings
slides:
  # Theme (black, white, league, sky, beige, simple, serif, blood, night, moon, solarized)
  theme: black

  # Code highlighting theme
  highlight_style: dracula

  # Enable Mermaid diagrams
  diagram: true

  # Reveal.js options
  reveal_options:
    controls: true              # Show navigation controls
    progress: true              # Show progress bar
    slideNumber: true           # Show slide numbers
    hash: true                  # URL reflects slide position
    history: true               # Browser history per slide
    keyboard: true              # Keyboard shortcuts
    overview: true              # Overview mode (ESC)
    center: true                # Vertically center slides
    touch: true                 # Touch navigation
    loop: false                 # Loop presentation
    rtl: false                  # Right-to-left
    shuffle: false              # Randomize slide order
    fragments: true             # Fragment animations
    fragmentInURL: false        # Fragment state in URL
    help: true                  # Show help overlay (?)
    showNotes: false            # Show speaker notes to all
    autoPlayMedia: null         # Auto-play media (null|true|false)
    preloadIframes: null        # Preload iframes (null|true|false)
    autoSlide: 0                # Auto-advance delay (0=off)
    autoSlideStoppable: true    # Stop auto-slide on interaction
    mouseWheel: false           # Mouse wheel navigation
    hideInactiveCursor: true    # Hide cursor when inactive
    hideCursorTime: 5000        # Cursor hide delay (ms)
    menu_enabled: true          # Enable slide menu plugin
---

# Your slides content here

Minimal Configuration

Most options have sensible defaults:

---
title: "My Talk"
type: slides

slides:
  theme: black
---

Advanced Features

Tables for Data

Present research results and benchmarks:

## Benchmark Results

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

Citations & Blockquotes

## Related Work

> "The best way to predict the future is to invent it."
> — Alan Kay

Recent research by Chen et al. (2024) demonstrates significant improvements[^1].

[^1]: Chen, S. et al. (2024). *Advances in AI*. Nature.

Multiple Code Blocks

## Implementation

**Training:**
\`\`\`python
model = Transformer(d_model=512)
optimizer = Adam(model.parameters(), lr=1e-4)
\`\`\`

**Inference:**
\`\`\`python
output = model.generate(prompt, max_tokens=100)
\`\`\`

Editing Options

Lore Studio (Visual Editor)

Lore Studio Edit slides visually with live preview. No code required.

Features:

Visual Markdown editor with live preview
Side-by-side editing
Real-time rendering
No installation needed

Code Editors

VS Code

Install Markdown extensions for syntax highlighting and preview.

Obsidian

Note-taking app with excellent Markdown support and callout compatibility.

Typora

Minimal distraction Markdown editor with WYSIWYG mode.

Any Text Editor

Notepad, Vim, Emacs — anything works with Markdown!

Use Cases

For Academics & Researchers

Conference Presentations

Present at NeurIPS, ACL, ICML with slides you can share on GitHub for reproducibility.

Group Meetings

Version control your lab meeting slides. Track changes over time.

Thesis Defense

Professional slides with citations, equations, and diagrams.

Grant Proposals

Presentation slides that match your written proposal (both in Markdown).

Benefits:

✅ Version control with Git (track every revision)
✅ Collaborate via GitHub pull requests
✅ Embed code, math, and diagrams
✅ Share source files for reproducibility
✅ No “formatting broke when I opened it” moments

For Educators

Course Lectures

Create a slide deck for each lecture. Students can fork and study from source.

Tutorial Workshops

Live coding demonstrations with syntax highlighting.

Student Presentations

Students submit slides via pull requests. Review and provide feedback via comments.

Benefits:

✅ Reusable content across semesters
✅ Students learn Git and Markdown
✅ Collaborative slide development
✅ Open educational resources (OER)

Comparison: PowerPoint vs Google Slides vs Hugo Blox

Feature	PowerPoint	Google Slides	Hugo Blox
Cost	$159.99/year	Free*	Free Forever
Format	Binary (`.pptx`)	Proprietary	Plain Markdown
Offline Editing	✅ Yes	⚠️ Limited	✅ Fully Offline
Version Control	❌ Difficult	❌ Very Limited	✅ Git Native
Platform Lock-in	⚠️ Microsoft	⚠️ Google	✅ None
Code Highlighting	⚠️ Basic	⚠️ Limited	✅ 50+ Languages
Math Equations	⚠️ Clunky	⚠️ Basic	✅ Full LaTeX
Portability	❌ Poor	❌ Cloud Only	✅ Works Anywhere
Edit Anywhere	❌ App Required	⚠️ Internet Required	✅ Any Text Editor
Future-Proof	❌ Format Changes	⚠️ API Changes	✅ Plain Text Forever
Collaboration	⚠️ Complex	✅ Good	✅ Git-based

Tips & Best Practices

Content Organization

文件夹content/
- 文件夹slides/
  - 文件夹conference-2024/
    index.md # Main slides
    diagram.png # Images in bundle
    data.csv # Data files
  - 文件夹lecture-01/
    index.md
  - 文件夹lecture-02/
    index.md
- 文件夹events/
  - 文件夹neurips-talk/
    index.md # Links to slides/conference-2024

Slide Design Tips

One Idea Per Slide

Don’t cram multiple concepts. Split into separate slides.

Use Visual Hierarchy

Headers (##), bold (text), and fragments guide attention.

Consistent Spacing

Use gap: 2rem consistently across dual-column layouts.

Test Speaker Notes

Always test presenter view (S key) before presenting.

Keep It Simple

Markdown’s simplicity is a feature, not a limitation.

Version Control

Commit slides to Git, tag releases for different versions.

Performance Tips

Optimize images - Use WebP format, reasonable dimensions
Lazy load media - Videos and heavy content load as needed
Limit animations - Too many fragments can slow rendering
Test on target device - Preview on laptop you’ll present with

Troubleshooting

Slides Don’t Render

Markdown Not Rendering Inside HTML

Problem:

<div>
### This won't work
</div>

Solution:

<div>

### This works!

</div>

Always add blank lines before and after Markdown inside HTML tags.

Code Block Not Highlighting

Check:

Triple backticks syntax correct
Language specified: ```python
Highlight theme exists in assets/css/libs/chroma/
No conflicting CSS

Speaker Notes Not Showing

Press S to open presenter console in a new window. Make sure pop-ups aren’t blocked.

Examples & Templates

Download Example Presentations

View Example Slides See all features in action with our comprehensive example presentation.

File Structure

---
title: "My Amazing Talk"
date: 2024-06-15
type: slides

slides:
  theme: black
  highlight_style: dracula
  diagram: true
  reveal_options:
    controls: true
    progress: true
    slideNumber: true
---

# Title Slide
### Your Name

---

## Agenda

- Introduction
- Methods
- Results
- Conclusion

---

# Thank You!

Questions?

Advanced Topics

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

Auto-Slide Timing

Auto-advance slides (useful for kiosks):

slides:
  reveal_options:
    autoSlide: 5000  # Auto-advance every 5 seconds
    loop: true       # Loop back to start

PDF Export

Export slides to PDF:

Open slides in browser
Add ?print-pdf to URL: localhost:1313/slides/my-talk/?print-pdf
Print to PDF (Ctrl+P / Cmd+P)
Save as PDF file

Share presentation URL:

https://yoursite.com/slides/my-talk/

Embed in another site:

<iframe src="https://yoursite.com/slides/my-talk/"
        width="960" height="540" frameborder="0">
</iframe>

Migration from Other Tools

From PowerPoint/Keynote

Export to Markdown - Use Pandoc or copy content manually
Extract images - Save to slide bundle folder
Simplify - Embrace Markdown’s simplicity (less is more)
Test - Preview and refine formatting

From Google Slides

Download as PPTX - Then follow PowerPoint steps
Copy text content - Paste into Markdown
Upload media - Add to page bundle
Rebuild - Often cleaner to start fresh with Markdown

From LaTeX Beamer

Good news! You already think in text-based slides:

Convert structure - \frame → --- delimiter
Math works - LaTeX equations work directly: $$...$$
Code works - Better than Beamer’s verbatim
Simpler syntax - Markdown is easier than LaTeX

Resources

Documentation

Markdown Reference

Content Types

Front Matter Options

Reveal.js Docs

Community

💬 Discord Community - Get help and share tips
🐛 GitHub Issues - Report bugs
⭐ Star on GitHub - Support the project
🐦 Follow @BuildLore - Updates and tips

Examples in the Wild

Thousands of researchers worldwide use Hugo Blox slides at:

🎓 Stanford, MIT, Harvard, Oxford, Cambridge
🏢 Google Research, Meta AI, Microsoft Research
🔬 CERN, NASA, Max Planck Institutes
🌐 Universities and research labs globally

FAQ

Can I use custom fonts?

Yes! Add custom CSS:

.reveal {
  font-family: 'Your Font', sans-serif;
}

Then load the font via Google Fonts or self-host.

Can I use animations and transitions?

Yes! Reveal.js supports slide transitions and custom animations:

slides:
  reveal_options:
    transition: 'slide'  # none, fade, slide, convex, concave, zoom

How do I present offline?

Hugo generates static HTML. Just:

Build your site: hugo
Open public/slides/my-talk/index.html in browser
Works completely offline (no internet needed)

Can I password protect slides?

Use Netlify’s password protection or host behind authentication. Slides are static HTML.

Can I change themes mid-presentation?

Not dynamically, but you can create multiple versions with different themes and switch between them.

Does it work on mobile?

Yes! Slides are responsive. Touch gestures work for navigation. Best on tablets or larger screens.

Next Steps

Try the Example View the comprehensive example slide deck showcasing all features.

Create Your First Deck Follow the quick start guide to create your first presentation.

Explore Blocks Combine slides with other content types for a complete site.

Deploy Your Site Host your presentations online for free with Netlify or GitHub Pages.