Installing

• Grab/Fork from repo
• docs folder has presentation
• slides/demo.md subfolder has main markdown

---

100% Markdown

• Rayveal assumes you want to use markdown to create slides. The index.html file points to a markdown file in slides/demo.md.

• It does whatever reveal.js can can. You can add invisible notes for yourself using two > > after a carriage return (see markdown file)

Author Notes: Author notes are similar to markdown blockquotes, but you use double greater than signs. They won’t appear on your slides, so I personally use them as reading notes, but Reveal.js has a presentation mode that allows you to see them in your slides.

---

Persistent Navigation

Notice: the persistent navigation bar at the bottom is on every page. It will disappear after 5 seconds. You can also toggle it by hitting the ctrl-t key. To modify, look for the following code (delete it if you don’t need it)

<footer class="footer">
  <div class="persistent">
    <strong>Slides:</strong> <a href="http://bit.ly/thenext50">bit.ly/thenext50</a> &bull; <strong>Contact:</strong>
    <a href="https://www.linkedin.com/in/planetoftheweb">LinkedIn</a> | <a href="https://www.linkedin.com/learning/instructors/ray-villalobos">courses</a> | <a href="http://twitter.com/planetoftheweb">@planetoftheweb</a> | <a href="http://github.com/planetoftheweb">github</a>
  </div>
  <div class="smaller">Use arrows to navigate, esc for overview</div>
</footer>

Author Notes: Author notes are similar to markdown blockquotes, but you use double greater than signs. They won’t appear on your slides, so I personally use them as reading notes, but Reveal.js has a presentation mode that allows you to see them in your slides.

---

Multiple slides

You can use multiple markdown files within the same slide, just add a different slide in the slides folder and link to it. (see markdown file for how it works)

Sidebar Menu

Press the ctrl-m key to show sidebar menu. You can use it to jump to different slides. There is also an index.txt file in the slides menu, where you can add other slides you want to feature in your menu.

---

Standalone Folder

Presentations live in a docs folder within the main project, simply upload the docs folder to a server and change the name if you want. It’s self contained. It’s also easy to add as documentation using Github Pages.

---

Fragments

1. Are on by default
2. You can write HTML lists
   • if you don’t want them

---

Code options

• Bootstrap-like colors for code
• primary success info warning danger
• tooltipsfor overlay explanations on rollover

---

Has Icon

• Template with an icon
• Preloading font-awesome by Dave Gandy
• <!– .slide: data-state=”hasicon” –>

---

Background Video

<!– .slide: data-state=”textonvideo” data-background-video=”http://planetoftheweb.com/i/video.mp4“ –>

Note: You also have the option of creating video as a background using regular reveal.js tags.

---

Background with an image

And some text, small shadow…

<!– .slide: data-state=”textonimage” data-background-image=”http://planetoftheweb.com/i/photo.jpg“ –>

---

Here’s some code

var electron = require('electron');
var BrowserWindow = electron.BrowserWindow;
var app = electron.app;

app.on('ready', function() {
  var appWindow;
  appWindow = new BrowserWindow();
  appWindow.loadURL('http://raybo.org');
});

Syntax highlighted, editable by default

---

Embedded Code

Here’s a sample of an embeded CodePen. Use an iframe.

---

Tables

Here’s what a table looks like. Use the tables generator to help you write the markdown.

	Extra small < 768px	Small ≥ 768px	Medium ≥992px	Large ≥1200px
Container	Auto	750px	970px	1170px
Size	.col-xs-	.col-sm-	.col-md-	.col-lg-
Column width	Auto	~62px	~81px	~97px

---

Circles

• one
• two
• three
• four
• five
• just list items

<!– .slide: data-state=”circles” –>