A custom theme and build system for reveal.js
I love reveal.js for its ability to let me do slide with code directly in the browser and with markdown. Theming and slide management is however tricky. Moving slides means navigating yourself in a potentially large and nested DOM tree.
What if instead you just wrote markdown and the slides were automatically generated for you? How? Continue to "slides via file structure"
- This demo repository β
- WorkerConf 2019 - Visualizing cloud architectures in real time with d3.js β
This WorkerConf slide was created using just markdown:
First, clone this repository
git clone https://github.com/julie-ng/tidy-revealjs
Then install dependencies, including reveal.js
npm install
Then start development server including live-reload while you work on your slides:
npm run dev
A browser window will automatically open http://localhost:3000/
Inside slides.config.js
, you can define variables to use your Handlebars template, for example:
module.exports = {
title: 'tidy-revealjs demo'
}
and then you can use {{ title }}
in handlebars.
When it comes to content, there is no index.html
with slides. Instead, you create files inside the slides
folder, which are loaded in alphabetical order.
- slide order is determined by alphabetical order
- subfolders are interpreted as vertical slides
Here is an example file structure for slides/
./slides
βββ 1.html
βββ 2.md
βββ 3.md
βββ base
βββ bulleted-lists.md
βββ ordered-lists.md
βββ tables-as-html.html
βββ tables.md
The easiest way to manage order of your slides is to prepend the filenames with numbers, for example:
βββ 1-title.html
βββ 20.md
βββ 30-point-of-view.md
βββ 40-markdown-support.html
Tip: consider numbering your slides, e.g. 10, 20, 30β¦ so you can insert and move content easily.
- HTML Slides must have
<section>
as root element. - Markdown Slides have the
.md
extension.
This template supports the same syntax for notes as in reveal js. When running in development mode, press s
key on your keyboard to open up the speaker mode.
In HTML, include an <aside>
element at the end of your <section>
<aside class="notes">
<ul>
<li>Note one</li>
<li>Note two</li>
<li>Note three</li>
</ul>
</aside>
Or in Markdown, everything after Note:
is processed as a speaker note
Note:
This is a note
- with a list
- another list item
For further examples of how to use this, please review my WorkerConf slides β
- Setup generator?
- Better for re-use than cloning this repository
- Better for versioning gulpfile.js that does the magic
- Specify "build" folder? Currently this builds to root project directory, so I could publish slides via
master
branch on GitHub pages. Might be confusing for others, who want to publish elsewhere. - Clean up and test theme?
This is just a template with some automation for creating slides. The heavy-lifting and presentation framework itself is reveal.js and all credit goes to Hakim El Hattab π