Reveal JS Cookbook

A framework for easily creating beautiful presentations using HTML.

Installation

  1. Install Node.js (4.0.0 or later)
  2. Clone the repository
    git clone https://github.com/hakimel/reveal.js.git
    
  3. Install dependencies
    npm install
    
  4. 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

dev#slide-number

<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

Marcus Baw Medium Blog

  1. Create a new GitHub repo with the presentation name
  2. git clone this repo to a suitable local directory
  3. Get a blank reveal.js presentation from reveal releases
  4. In the GitHub settings for that repo, you need to enable GitHub Pages and select the master branch.
Written on August 6, 2018