— layout: slide title: Sample Presentation description: A presentation slide for how to use reveal.js in Jekyll theme: white transition: slide permalink: /slides/sample-presentation date: 2018-01-01 00:00:00 -0600
tags: presentation¶ ↑
<section data-markdown>
Hello!¶ ↑
The Darkmatter Theme includes reveal.js which enables you to create beautiful interactive slide decks in your Jekyll Project using HTML and Markdown. </section>
<section>
Basic Navigation
- Press [Esc] to enter the slide overview
- Press [s] to open the notes window
- Use cursors [< >] or simply swipe to navigate
<aside class=“notes”> Oh hey, these are some notes. They'll be hidden in your presentation., but you can see them if you open the speaker notes window. </aside>
</section>
<section> <section id=“fragments”> <h2>Fragments</h2> <p>Hit the next arrow…</p> <p class=“fragment”>… to step through …</p> <p><span class=“fragment”>… a</span> <span class=“fragment”>fragmented</span> <span class=“fragment”>slide.</span></p>
<aside class="notes"> This slide has fragments which are also stepped through in the notes window. </aside> </section> <section> <h2>Fragment Styles</h2> <p>There's different types of fragments, like:</p> <p class="fragment grow">grow</p> <p class="fragment shrink">shrink</p> <p class="fragment fade-out">fade-out</p> <p class="fragment fade-up">fade-up (also down, left and right!)</p> <p class="fragment current-visible">current-visible</p> <p>Highlight <span class="fragment highlight-red">red</span> <span class="fragment highlight-blue">blue</span> <span class="fragment highlight-green">green</span></p> </section>
</section>
<section> <div class=“col-8-md”> <h2>Pretty Code</h2>
<pre><code class="hljs" data-trim contenteditable> me = new person(); while(me.awake()){ me.code(); } </code></pre> <p>Code syntax highlighting courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p> </div>
</section>
<section data-markdown data-transition=“slide” data-background=“#333” data-background-transition=“zoom”>
Project Structure¶ ↑
Simply add your presentations under the _slides directory
/ _includes/ # HEAD, HEADER AND FOOTER foot.html footer.html head.html header.html _layouts/ # LAYOUTS DIRECTORY cover.html default.html page.html post.html slide.html _pages/ # STATIC PAGES home/ about/ ... _posts/ # BLOG POSTS _slides/ # REVEAL.JS HTML PRESENTATIONS assets/ # FONTS, IMAGES, SCRIPTS, STYLES fonts/ images/ modules/ reveal.js scripts/ styles/
</section>
<section> <img src=“../assets/images/darkmatter.png” style=“border:none; box-shadow:none;”/> <h3>Darkmatter Theme</h3> <p>Handcrafted with <i class=“fas fa-heart”></i> by a <a href=“Fellow”>fellowhobbyist.com“>Fellow Hobbyist</a></p> </section>