Reveal JS Cookbook
A framework for easily creating beautiful presentations using HTML.
Installation
- Install Node.js (4.0.0 or later)
- Clone the repository
git clone https://github.com/hakimel/reveal.js.git
- Install dependencies
npm install
- Start the local server (http://localhost:8000 to view your presentation)
npm start
You can change the port by using npm start – –port=8001.
Barebones
<div class="reveal">
<div class="slides">
<!-- Slides are separated by newline + three dashes + newline, vertical slides identical but two dashes -->
<section data-markdown data-separator="^\n---\n$" data-separator-vertical="^\n--\n$" data-background="#d9d8d8">
<script type="text/template">
# Install
--
1. Install Node.js (4.0.0 or later) <!-- .element: class="fragment" data-fragment-index="1" -->
2. Clone the repository <!-- .element: class="fragment" data-fragment-index="2" -->
<pre><code class="hljs" data-trim contenteditable>git clone
https://github.com/hakimel/reveal.js.git </code></pre>
3. Install dependencies <!-- .element: class="fragment" data-fragment-index="3" -->
<pre><code class="hljs" data-trim contenteditable> npm install
</code></pre>
4. Start the local server <!-- .element: class="fragment" data-fragment-index="4" -->
http://localhost:8000 <!-- .element: class="fragment" data-fragment-index="4" -->
<pre><code class="hljs" data-trim contenteditable> npm start
</code></pre>
---
# Nested slides
> Best quote ever.
- [x] item1
- [ ] item
--
# Examples
![Sample image](https://s3.amazonaws.com/static.slid.es/logo/v2/slides-symbol-512x512.png)
</script>
</section>
</div>
</div>
Configuration
<script>
// More info about config & dependencies:
// - https://github.com/hakimel/reveal.js#configuration
// - https://github.com/hakimel/reveal.js#dependencies
Reveal.configure({ slideNumber: true });
Reveal.initialize({
dependencies: [
{ src: 'plugin/markdown/marked.js' },
{ src: 'plugin/markdown/markdown.js' },
{ src: 'plugin/notes/notes.js', async: true },
{ src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } }
]
});
</script>
Using Reveal in github
- Create a new GitHub repo with the presentation name
- git clone this repo to a suitable local directory
- Get a blank reveal.js presentation from reveal releases
- In the GitHub settings for that repo, you need to enable GitHub Pages and select the master branch.
Written on August 6, 2018