http://localhost:1313/tags/markdown/ Markdown HugoBlox Kit (https://hugoblox.com)en-usWed, 15 Feb 2017 00:00:00 +0000 http://localhost:1313/media/icon_hu_da05098ef60dc2e7.png http://localhost:1313/tags/markdown/ http://localhost:1313/events/influence-light-induced-dynamics-2017/ Wed, 15 Feb 2017 00:00:00 +0000 http://localhost:1313/events/influence-light-induced-dynamics-2017/ <!-- ## 🎯 Why Markdown Slides? > [!SUCCESS] True Presentation Freedom > Unlike PowerPoint or Keynote, your presentations are **future-proof**, **portable**, and completely **under your control**. No proprietary formats, no vendor lock-in, no subscription fees. ### The Problem with Traditional Slides **PowerPoint & Keynote:** - 💸 Expensive licenses or subscriptions - 🔒 Proprietary file formats (`.pptx`, `.key`) - 💻 Platform-specific (Windows/Mac only) - 📦 Large binary files - 🚫 Difficult to version control - 😰 Lost formatting when sharing **Google Slides:** - ☁️ Requires internet connection - 🔐 Data stored on Google's servers - 📱 Limited offline editing - 🎨 Formatting breaks when exporting - 🔗 Dependency on Google's platform ### The Hugo Blox Solution > [!TIP] **Markdown Changes Everything** > Write your presentations in simple, human-readable Markdown. Edit anywhere, present anywhere, own forever. --- ## ✨ What You Get ### 🎨 Professional Design, Zero Effort - **15+ Built-in Themes** — Black, white, sky, league, and more - **Syntax Highlighting** — Beautiful code blocks with 50+ languages - **Math Support** — LaTeX equations render perfectly: $E = mc^2$ - **Responsive** — Looks great on any screen size ### 📝 Write in Plain Text ````markdown ## My Slide Title - Point one - Point two - Point three ```python def hello(): return "World!" ``` --- ```` That's it! No complex UI, no formatting headaches. ### 🔄 Edit Anywhere, Anytime > [!IMPORTANT] **Zero Lock-In** > Your slides are just Markdown files. Edit them in: > - **Ownable CMS** — Visual editing with live preview > - **VS Code** — With Markdown extensions > - **Obsidian** — Note-taking app that speaks Markdown > - **Typora** — Minimal distraction writing > - **Any text editor** — Even Notepad works! <div class="text-left"> <a id="button-caa1f8b8593fb0bc3da5f9c1151c9c75" href="https://docs.hugoblox.com/guides/studio/" target="_blank" rel="noopener noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-4 py-2 text-base rounded-xl" role="button" aria-label="Try Ownable CMS" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.53 16.122a3 3 0 0 0-5.78 1.128a2.25 2.25 0 0 1-2.4 2.245a4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128m0 0a16 16 0 0 0 3.388-1.62m-5.043-.025a16 16 0 0 1 1.622-3.395m3.42 3.42a16 16 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a16 16 0 0 0-4.649 4.764m3.42 3.42a6.78 6.78 0 0 0-3.42-3.42"/></svg> </span> <span>Try Ownable CMS</span> </a> </div> ### 🎯 Advanced Features **Dual Column Layouts:** ```markdown <div style="display: flex; gap: 2rem;"> <div style="flex: 1;">Column 1</div> <div style="flex: 1;">Column 2</div> </div> ``` **Fragment Animations:** ```markdown {{< fragment >}}Appear on click!{{< /fragment >}} ``` **Speaker Notes:** ```markdown Note: Your private notes here (visible in presenter view only) ``` **Vertical Slide Stacks:** Navigate down for sub-topics! --- ## 🚀 Getting Started is Easy > [!EXAMPLE] **Create Your First Slide Deck in 3 Steps** ### Step 1: Create Your Slides Create `content/slides/my-talk/index.md`: ```yaml --- title: "My Amazing Talk" type: slides slides: theme: black --- # My Amazing Talk ### Your Name --- ## Main Points - Point 1 - Point 2 - Point 3 --- ## Thank You! ``` ### Step 2: Link to Your Event In your event page (`content/events/my-event/index.md`): ```yaml --- title: "My Conference Presentation" slides: "my-talk" # References the slides folder name --- ``` ### Step 3: Present! Your slides are automatically: - ✅ Embedded on the event page - ✅ Available in fullscreen mode (click <span class="inline-block pr-1"> <span style="height: 1em; transform: translateY(0.1em);">arrows-expand</span> </span> button) - ✅ Accessible at a direct URL - ✅ Keyboard-navigatable (→ ← keys) <div class="text-center"> <a id="button-831fa3dc3b195d154cf70236e638b591" href="https://docs.hugoblox.com/guides/slides/" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-white dark:bg-zinc-900 border-2 border-primary-500 text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 hover:border-primary-600 active:bg-primary-100 dark:active:bg-primary-950 shadow-md hover:shadow-lg hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Read Full Documentation" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 6.042A8.97 8.97 0 0 0 6 3.75c-1.052 0-2.062.18-3 .512v14.25A9 9 0 0 1 6 18c2.305 0 4.408.867 6 2.292m0-14.25a8.97 8.97 0 0 1 6-2.292c1.052 0 2.062.18 3 .512v14.25A9 9 0 0 0 18 18a8.97 8.97 0 0 0-6 2.292m0-14.25v14.25"/></svg> </span> <span>Read Full Documentation</span> </a> </div> --- ## 💎 Why Academics & Researchers Love It > [!QUOTE] > "I can finally version control my presentations with Git, collaborate using GitHub, and never worry about formatting breaking again. Game changer for reproducible research!" > — *Dr. Xin Liu, MIT* ### Perfect for Research - **Version Control** — Track every change with Git - **Collaboration** — Use GitHub pull requests for slide reviews - **Reproducibility** — Slides are plain text, commit them with your code - **Open Science** — Share presentations on GitHub, no barriers - **Citations** — Include BibTeX references easily - **Jupyter Integration** — Embed notebooks and visualizations ### Perfect for Teaching - **Reusable Content** — Mix and match slides across courses - **Student Contributions** — Students can submit slide PRs - **Live Coding** — Syntax highlighting for all languages - **Interactive Examples** — Embed interactive visualizations - **Accessible** — Keyboard navigation, screen reader friendly --- ## 🎬 See It In Action > [!NOTE] > **Try it now!** The slides embedded above demonstrate all these features: > - Code highlighting with Python > - Mathematical equations with LaTeX > - Dual column layouts (slides 4-6) > - Fragment animations > - Multiple themes > > Click the <span class="inline-block pr-1"> <span style="height: 1em; transform: translateY(0.1em);">arrows-expand</span> </span> **fullscreen button** (top right) to experience presentation mode! ### Live Features to Try 1. **Navigate**: Use arrow keys (→ ←) or click controls 2. **Fullscreen**: Click the expand button to go fullscreen 3. **Speaker Notes**: Press `S` to open presenter view (try it!) 4. **Overview**: Press `ESC` to see all slides at once 5. **Search**: Press `/` to search slide content 6. **Zoom**: `Alt+Click` to zoom into details <div class="text-left"> <a id="button-84042aac734b79ca9dbb0940d8e9bbc2" href="http://localhost:1313/slides/example/" target="_blank" rel="noopener" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-transparent text-primary-600 dark:text-primary-400 hover:bg-primary-50 dark:hover:bg-primary-950/50 active:bg-primary-100 dark:active:bg-primary-950 hover:scale-105 active:scale-95 focus:ring-primary-500/50 px-4 py-2 text-base rounded-lg" role="button" aria-label="Open Slides in New Tab" > <span class="flex-shrink-0"> <span class="flex items-center justify-center leading-none text-lg">external-link</span> </span> <span>Open Slides in New Tab</span> </a> </div> --- ## 🆚 Comparison | Feature | PowerPoint | Google Slides | **Hugo Blox** | |---------|-----------|---------------|---------------| | **Cost** | $159.99/year | Free* | **Free Forever** | | **Format** | Binary (`.pptx`) | Proprietary | **Plain Markdown** | | **Version Control** | ❌ Difficult | ❌ Limited | **✅ Git Native** | | **Offline Editing** | ✅ Yes | ⚠️ Limited | **✅ Fully Offline** | | **Platform Lock-in** | ⚠️ Microsoft | ⚠️ Google | **✅ None** | | **Code Highlighting** | ⚠️ Basic | ⚠️ Limited | **✅ 50+ Languages** | | **Math Equations** | ⚠️ Clunky | ⚠️ Basic | **✅ Full LaTeX** | | **Portability** | ❌ Poor | ❌ Requires Google | **✅ Works Anywhere** | | **Future-Proof** | ❌ Format changes | ⚠️ API changes | **✅ Plain Text Forever** | | **Open Source** | ❌ No | ❌ No | **✅ Yes** | > [!SUCCESS] > **Hugo Blox wins on freedom, portability, and long-term sustainability.** --- ## 🛠️ Advanced Capabilities ### Code Blocks with Syntax Highlighting ```python import torch import torch.nn as nn class Transformer(nn.Module): def __init__(self, d_model=512, nhead=8): super().__init__() self.attention = nn.MultiheadAttention(d_model, nhead) def forward(self, x): return self.attention(x, x, x)[0] ``` ### Mathematical Equations Display equations with LaTeX: ```latex $$ \nabla \times \vec{E} = -\frac{\partial \vec{B}}{\partial t} $$ $$ \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi} $$ ``` ### Dual Column Layouts Perfect for before/after comparisons, code + explanation, or image + text: ```markdown <div style="display: flex; gap: 2rem;"> <div style="flex: 1;">Left content</div> <div style="flex: 1;">Right content</div> </div> ``` See slides 4-6 in the embedded presentation above for live examples! --- ## 🎓 For Educators: Teach the Future > [!TIP] **Empower Your Students** > Teaching with Hugo Blox means teaching modern, transferable skills: > - Markdown (used everywhere: GitHub, Notion, Obsidian) > - Version control (essential for careers) > - Web technologies (HTML, CSS) > - Reproducible science practices ### Course Integration ```markdown courses/ ├── ml-101/ │ ├── lecture-1/ │ │ ├── index.md (slides) │ │ └── notes.md │ ├── lecture-2/ │ │ └── index.md │ └── _index.md ``` Each lecture gets its own slide deck, all version controlled, all editable by students as PRs. --- ## 🌍 Join the Community > [!IMPORTANT] **Built by Academics, for Academics** > Hugo Blox is used by researchers at: > - 🎓 Stanford, MIT, Harvard, Oxford, Cambridge > - 🏢 Google Research, Meta AI, OpenAI > - 🔬 CERN, NASA, NIH > - 🌐 Thousands of universities worldwide <div class="text-center"> <a id="button-2e5f140971b981267e0c82eb48f953a7" href="https://github.com/HugoBlox/kit" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-6 py-3 text-lg rounded-full" role="button" aria-label="Star on GitHub" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/></svg> </span> <span>Star on GitHub</span> </a> </div> ### Get Help & Connect - 📚 [Documentation](https://docs.hugoblox.com/guides/slides/) - 💬 [Discord Community](https://discord.gg/z8wNYzb) - 🐛 [GitHub Issues](https://github.com/HugoBlox/kit/issues) - 🐦 [Follow @MakeOwnable](https://twitter.com/MakeOwnable) --- ## 🚀 Ready to Create? > [!SUCCESS] **Start Building Beautiful Presentations Today** > No installation required. No account needed. Just Markdown and your creativity. <div class="text-center"> <a id="button-31d3397b04ea98c747ffe94412e7df81" href="https://docs.hugoblox.com/start/" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-primary-500 to-primary-600 hover:from-primary-600 hover:to-primary-700 active:from-primary-700 active:to-primary-800 text-white shadow-lg shadow-primary-500/25 hover:shadow-xl hover:shadow-primary-500/30 hover:-translate-y-0.5 hover:scale-[1.02] active:scale-[0.98] focus:ring-primary-500/50 px-8 py-4 text-xl rounded-full" role="button" aria-label="Get Started Now" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M15.59 14.37q.159.666.16 1.38a6 6 0 0 1-6 6v-4.8m5.84-2.58a14.98 14.98 0 0 0 6.16-12.12A14.98 14.98 0 0 0 9.631 8.41m5.96 5.96a14.9 14.9 0 0 1-5.841 2.58m-.119-8.54a6 6 0 0 0-7.381 5.84h4.8m2.581-5.84a14.9 14.9 0 0 0-2.58 5.84m2.699 2.7q-.155.032-.311.06a15 15 0 0 1-2.448-2.448l.06-.312m-2.24 2.39a4.49 4.49 0 0 0-1.757 4.306q.341.054.696.054a4.5 4.5 0 0 0 3.61-1.812M16.5 9a1.5 1.5 0 1 1-3 0a1.5 1.5 0 0 1 3 0"/></svg> </span> <span>Get Started Now</span> </a> </div> <br> <div class="text-center"> <a id="button-43cfcd0406d4c049e3781ddbf6110aea" href="https://docs.hugoblox.com/guides/studio/" rel="noreferrer" class="inline-flex items-center gap-2 font-medium no-underline transition-all duration-300 ease-out transform-gpu focus:outline-none focus:ring-4 focus:ring-offset-2 focus:ring-offset-white dark:focus:ring-offset-zinc-900 disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none bg-gradient-to-br from-secondary-500 to-secondary-600 hover:from-secondary-600 hover:to-secondary-700 active:from-secondary-700 active:to-secondary-800 text-white shadow-lg shadow-secondary-500/25 hover:shadow-xl hover:shadow-secondary-500/30 hover:scale-105 active:scale-95 focus:ring-secondary-500/50 px-6 py-3 text-lg rounded-xl" role="button" aria-label="Try Ownable CMS" > <span class="flex-shrink-0"> <svg class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M9.53 16.122a3 3 0 0 0-5.78 1.128a2.25 2.25 0 0 1-2.4 2.245a4.5 4.5 0 0 0 8.4-2.245c0-.399-.078-.78-.22-1.128m0 0a16 16 0 0 0 3.388-1.62m-5.043-.025a16 16 0 0 1 1.622-3.395m3.42 3.42a16 16 0 0 0 4.764-4.648l3.876-5.814a1.151 1.151 0 0 0-1.597-1.597L14.146 6.32a16 16 0 0 0-4.649 4.764m3.42 3.42a6.78 6.78 0 0 0-3.42-3.42"/></svg> </span> <span>Try Ownable CMS</span> </a> </div> --- ## 📖 Additional Resources ### Templates & Examples - [Academic Slides Template](https://github.com/HugoBlox/theme-academic-cv) <!-- - [Conference Talk Template](https://github.com/HugoBlox/starter-presentation) - [Course Lecture Template](https://github.com/HugoBlox/starter-course) ### Tutorials - [Creating Your First Slide Deck](https://docs.hugoblox.com/tutorial/slides/) - [Advanced Slide Layouts](https://docs.hugoblox.com/reference/slides/) - [Customizing Themes](https://docs.hugoblox.com/customization/) - [Using Ownable CMS](https://docs.hugoblox.com/studio/) --> <h3 id="tips--tricks">Tips &amp; Tricks</h3> <div class="callout flex px-4 py-3 mb-6 rounded-md border-l-4 bg-emerald-100 dark:bg-emerald-900 border-emerald-500" data-callout="tip" data-callout-metadata=""> <span class="callout-icon pr-3 pt-1 text-emerald-600 dark:text-emerald-300"> <svg height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M12 18v-5.25m0 0a6 6 0 0 0 1.5-.189m-1.5.189a6 6 0 0 1-1.5-.189m3.75 7.478a12.1 12.1 0 0 1-4.5 0m3.75 2.383a14.4 14.4 0 0 1-3 0M14.25 18v-.192c0-.983.658-1.823 1.508-2.316a7.5 7.5 0 1 0-7.517 0c.85.493 1.509 1.333 1.509 2.316V18"/></svg> </span> <div class="callout-content dark:text-neutral-300"> <div class="callout-title font-semibold mb-1"><strong>Pro Tips for Better Presentations</strong></div> <div class="callout-body"><ol> <li>Keep slides simple — one idea per slide</li> <li>Use dual columns for comparisons</li> <li>Add speaker notes with <code>Note:</code> prefix</li> <li>Test presenter view before your talk</li> <li>Use fragments to control pacing</li> <li>Version control your slides with Git</li> <li>Share source files for reproducibility</li> </ol></div> </div> </div> <hr> <p><strong>Have questions?</strong> Check out the or !</p> <p><strong>Want to contribute?</strong> Hugo Blox is open source! . &ndash;&gt;</p>