reveal.js is pretty awesome. I have been using it for the last 9 months now and love it. It was a bit of hassle to set it up initially. Once you have an example, yo can replicate and be productive by copying and pasting existing one, and getting a consistent look and workflow. And the results? amazing.
To create a new presentation
The easiest way to create a new slides for your topic is to copy an
existing folder, eg.
netbox, and make modifications to your
Each folder should have the following contents:
. ├── images ├── index.html ├── my.css └── slides.md
.md are essential.
index.html is the overall
HTML shell that will be loaded by browser, and
.md are slide
contents that will be converted from Markdown into HTML and included
index.html. You can split your contents into multiple
files, which we will cover in more details next.
my.css is used to make customized CSS change per each deck. There is
also a common which determines the overall look (as default
look). Both are included in
index.html. Of course you can
include/modify other CSS as your wish in
index.html, just like any
other web page programming.
<!-- My css --> <link rel="stylesheet" href="../css/my.css"> <link rel="stylesheet" href="my.css">
index.html is the entry point for browser. There are a few places
you would like to update to match your topic and contents:
<title>: the text shown as page title on a browser.
<meta name="description" content="<>">: description text is useful when page is picked up by search engine.
<meta name="autho" content="<>">: author names
<p class="copyright">...</p>: your copyright text.
Slide contents are written in Markdown in separate files,
slides.md. To include a markdown file into slides:
<section data-markdown="slides.md" data-separator="^---" data-vertical="^--" data-notes="^Note:" data-charset="utf-8"> </section>
You can include multiple
.md files in a single presentation. This
gives you flexibility to organize contents into reusable chunks and
present them in different combinations based on audience.
data-markdown: Markdown file to include.
data-separator: this is essentially a page break in Markdown file.
data-vertical: contents separated by this will be included on the same page, but will be showns as vertically stacked contents, one at a time (like a sub-page).
data-notes: mark the start of presenter notes. These notes are visible to presenter, but not to audience.
- You can follow the official guide by
- Or, using the desktape:
decktape reveal <url> <filename>.pdf
— by Feng Xia