Slides | Shivang Chopra | CS PhD @ Georgia Techhttps://shivangchopra11.github.io/slides/SlidesHugo Blox Builder (https://hugoblox.com)en-us<link>https://shivangchopra11.github.io/slides/example/</link><pubDate>Mon, 01 Jan 0001 00:00:00 +0000</pubDate><guid>https://shivangchopra11.github.io/slides/example/</guid><description><!-- --- title: Slides summary: An introduction to using Hugo Blox Builder's Slides feature. authors: [] tags: [] categories: [] date: '2019-02-05T00:00:00Z' slides: # Choose a theme from https://github.com/hakimel/reveal.js#theming theme: black # Choose a code highlighting style (if highlighting enabled in `params.toml`) # Light style: github. Dark style: dracula (default). highlight_style: dracula --- # Create slides in Markdown with Hugo Blox Builder [Hugo Blox Builder](https://hugoblox.com/) | [Documentation](https://docs.hugoblox.com/content/slides/) --- ## Features - Efficiently write slides in Markdown - 3-in-1: Create, Present, and Publish your slides - Supports speaker notes - Mobile friendly slides --- ## Controls - Next: `Right Arrow` or `Space` - Previous: `Left Arrow` - Start: `Home` - Finish: `End` - Overview: `Esc` - Speaker notes: `S` - Fullscreen: `F` - Zoom: `Alt + Click` - [PDF Export](https://revealjs.com/pdf-export/) --- ## Code Highlighting Inline code: `variable` Code block: ```python porridge = "blueberry" if porridge == "blueberry": print("Eating...") ``` --- ## Math In-line math: $x + y = z$ Block math: $$ f\left( x \right) = \;\frac{{2\left( {x + 4} \right)\left( {x - 4} \right)}}{{\left( {x + 4} \right)\left( {x + 1} \right)}} $$ --- ## Fragments Make content appear incrementally ``` {{% fragment %}} One {{% /fragment %}} {{% fragment %}} **Two** {{% /fragment %}} {{% fragment %}} Three {{% /fragment %}} ``` Press `Space` to play! <span class="fragment " > One </span> <span class="fragment " > <strong>Two</strong> </span> <span class="fragment " > Three </span> --- A fragment can accept two optional parameters: - `class`: use a custom style (requires definition in custom CSS) - `weight`: sets the order in which a fragment appears --- ## Speaker Notes Add speaker notes to your presentation ```markdown {{% speaker_note %}} - Only the speaker can read these notes - Press `S` key to view {{% /speaker_note %}} ``` Press the `S` key to view the speaker notes! <aside class="notes"> <ul> <li>Only the speaker can read these notes</li> <li>Press <code>S</code> key to view</li> </ul> </aside> --- ## Themes - black: Black background, white text, blue links (default) - white: White background, black text, blue links - league: Gray background, white text, blue links - beige: Beige background, dark text, brown links - sky: Blue background, thin dark text, blue links --- - night: Black background, thick white text, orange links - serif: Cappuccino background, gray text, brown links - simple: White background, black text, blue links - solarized: Cream-colored background, dark green text, blue links --- <section data-noprocess data-shortcode-slide data-background-image="/media/boards.jpg" > ## Custom Slide Customize the slide style and background ```markdown {{< slide background-image="/media/boards.jpg" >}} {{< slide background-color="#0000FF" >}} {{< slide class="my-style" >}} ``` --- ## Custom CSS Example Let's make headers navy colored. Create `assets/css/reveal_custom.css` with: ```css .reveal section h1, .reveal section h2, .reveal section h3 { color: navy; } ``` --- # Questions? [Ask](https://discord.gg/z8wNYzb) [Documentation](https://docs.hugoblox.com/content/slides/) --></description></item></channel></rss>