} );
```
- ### Folder Structure
- - **css/** Core styles without which the project does not function
- - **js/** Like above but for JavaScript
- - **plugin/** Components that have been developed as extensions to reveal.js
- - **lib/** All other third party assets (JavaScript, CSS, fonts)
+ ### Code syntax higlighting
- ## Speaker Notes
+ By default, Reveal is configured with [highlight.js](http://softwaremaniacs.org/soft/highlight/en/) for code syntax highlighting. Below is an example with clojure code that will be syntax highlighted:
- If you're interested in using speaker notes, reveal.js comes with a Node server that allows you to deliver your presentation in one browser while viewing speaker notes in another.
+ ```html
+ <section>
+ <pre><code>
+ (def lazy-fib
+ (concat
+ [0 1]
+ ((fn rfib [a b]
+ (lazy-cons (+ a b) (rfib b (+ a b)))) 0 1)))
+ </code></pre>
+ </section>
+ ```
- To include speaker notes in your presentation, simply add an `<aside class="notes">` element to any slide. These notes will be hidden in the main presentation view.
- You'll also need to [install Node.js](http://nodejs.org/); then, install the server dependencies by running `npm install`.
+ ### Overview mode
- Once Node.js and the dependencies are installed, run the following command from the root directory:
+ Press "Esc" key to toggle the overview mode on and off. While you're in this mode, you can still navigate between slides,
+ as if you were at 1,000 feet above your presentation. The overview mode comes with a few API hooks:
- node plugin/speakernotes
+ ```javascript
+ Reveal.addEventListener( 'overviewshown', function( event ) { /* ... */ } );
+ Reveal.addEventListener( 'overviewhidden', function( event ) { /* ... */ } );
- By default, the slides will be served at [localhost:1947](http://localhost:1947).
+ // Toggle the overview mode programmatically
+ Reveal.toggleOverview();
+ ```
- You can change the appearance of the speaker notes by editing the file at `plugin/speakernotes/notes.html`.
+ ### Fullscreen mode
+ Just press »F« on your keyboard to show your presentation in fullscreen mode. Press the »ESC« key to exit fullscreen mode.
+## Multiplexing
+
+The multiplex plugin allows your audience to view the slides on their own phone, tablet or laptop. As the master navigates the slides, all clients will update in real time. See a demo at [http://revealjs.jit.su/](http://revealjs.jit.su)
+
+Configuration is via the multiplex object in index.html. To generate unique secret and token values, visit [revealjs.jit.su/token](revealjs.jit.su/token)
+
+multiplex.secret should only be configured on those pages you wish to be able to control slide navigatoin for all clients. Multi-master configurations work, but if you don't wish your audience to be able to control your slides, set the secret to null. In this master/slave setup, you should create a publicly accessible page with secret set to null, and a protected page containing your secret.
+
+You are very welcome to use the server running at reveal.jit.su, however availability and stability are not guaranteed. For anything mission critical I recommend you run your own server. It is simple to deploy to nodejitsu or run on your own environment.
+
+### Known Issues
- - The notes page is supposed to show the current slide and the next slide, but when it first starts, it always shows the first slide in both positions.
-
- ## Examples
-
- * http://lab.hakim.se/reveal-js/ (original)
- * http://www.ideapolisagency.com/ by [@achrafkassioui](http://twitter.com/achrafkassioui)
- * http://lucienfrelin.com/ by [@lucienfrelin](http://twitter.com/lucienfrelin)
- * http://creatorrr.github.com/ThePoet/
- * http://moduscreate.com/ by [@ModusCreate](https://twitter.com/ModusCreate)
- * http://idea.diwank.name/ by [Diwank Singh](http://diwank.name/)
- * [Webapp Development Stack & Tooling](http://dl.dropbox.com/u/39519/talks/jquk-tooling%2Bappstack/index.html) by [Paul Irish](https://github.com/paulirish)
- * [Lock-free algorithms](http://concurrencykit.org/presentations/lockfree_introduction/) by Samy Al Bahra
- * [Not Your Average Drag and Drop](http://www.thecssninja.com/talks/not_your_average_dnd/) by [Ryan Seddon](https://github.com/ryanseddon)
- * [Elasticsearch](http://spinscale.github.com/elasticsearch/2012-03-jugm.html) by [@spinscale](http://twitter.com/spinscale)
- * [JavaScript Tooling](http://dl.dropbox.com/u/39519/talks/jsconf-tools/index.html) by [Paul Irish](https://github.com/paulirish)
- * [The Graphical Web: Fostering Creativity](http://vhardy.github.com/presentations/html5-community-meet-up-2012/) by [Vincent Hardy](https://github.com/vhardy)
- * [Mobile Web Programming is a Bloody Mess](http://westcoastlogic.com/slides/debug-mobile/) by [Brian LeRoux](https://github.com/brianleroux)
- * [Bio Database Access and Sequence Alignment](http://www.philipbjorge.com/bioinformatics-presentation/) by [Philip Bjorge](https://github.com/philipbjorge)
- * [Web vs Native](http://prez.mahemoff.com/state-native/) by [Michael Mahemoff](https://github.com/mahemoff)
- * [Continuously Integrated JS Development](http://trodrigues.net/presentations/buster-ci/) by [Tiago Rodrigues](https://github.com/trodrigues)
- * [To be Future Friendly is to be Device Agnostic](http://dl.dropbox.com/u/409429/presentations/toster-2012/index.html) by [Joe McCann](https://github.com/joemccann)
- * [The Web Development Workflow of 2013](http://dl.dropbox.com/u/39519/talks/fluent/index.html) by [Paul Irish](https://github.com/paulirish)
- * [How To Cope With Graphical Challenges Using Latest Web Technologies](http://alexw.me/playground/slideshows/w3c_netcraft/) by [Alex Wolkov](https://github.com/altryne)
- * [Going Deeper with jQuery Mobile](http://andymatthews.net/downloads/presentations/going-deeper-with-jquery-mobile/) by [Andy Matthews](https://github.com/commadelimited)
- * [Studio Nord](http://studionord.org)
- * [Herrljunga Cider](http://herrljungacider.se/uk/campaign/)
- * [PhoneGap Pain Points](http://phonegap-pain-points.appspot.com/) by [Pamela Fox](https://github.com/pamelafox)
- * [Using HTML5 To Power Your Game Production](http://www.blitzgamesstudios.com/blitztech/html5-presentation) by Richard Hackett
-
-
- [Send me a link](http://hakim.se/about/contact) if you used reveal.js for a project or presentation.
-
-
- ## History
-
- #### 1.5 (master/beta)
- - New API method ```Reveal.getPreviousSlide()```
- - New API method ```Reveal.getCurrentSlide()```
- - New API method ```Reveal.getIndices()```
- - Fixed bug where the ```.present``` class was sometimes left on the previous slide
- - Added support for slides written using markdown
- - Added helped method ```Reveal.getQueryHash()```
- - Added EOT font for IE support
- - IE8 support
- - Fixed bug where hovering 3D links in Chrome caused them to disappear
- - Disable 3D links in IE and more accurate CSS feature detection
-
- #### 1.4
- - Main ```#reveal container``` is now selected via a class instead of ID
- - API methods for adding or removing all event listeners
- - The ```slidechange``` event now includes currentSlide and previousSlide
- - Fixed bug where ```slidechange``` was firing twice when history was enabled
- - Folder structure updates for scalability (see /lib & /plugin)
- - Slide notes by [rmurphey](https://github.com/rmurphey)
- - Bumped up default font-size for code samples
- - Added beige theme
- - Added ```autoSlide``` config
- - Bug fix: The ```slidechanged``` event is now firing upon ```hashchange```. Thanks [basecode](https://github.com/basecode)
- - Bug fix: JS error when the ```progress``` option was true but there was no progress DOM element
- - ```keyboard``` config flag for disabling all keyboard navigation
-
- #### 1.3
- - Revised keyboard shortcuts, including ESC for overview, N for next, P for previous. Thanks [mahemoff](https://github.com/mahemoff)
- - Added support for looped presentations via config
- - Fixed IE9 fallback
- - Added event binding methods (```Reveal.addEventListener```, ```Reveal.removeEventListener```)
- - Added ```slidechanged``` event
- - Added print styles. Thanks [skypanther](https://github.com/skypanther)
- - The address bar now hides automatically on mobile browsers
- - Space and return keys can be used to exit the overview mode
- - Events for fragment states (```fragmentshown``` / ```fragmenthidden```)
- - Support for swipe navigation on touch devices. Thanks [akiersky](https://github.com/akiersky)
- - Support for pinch to overview on touch devices
-
- #### 1.2
-
- - Big changes to DOM structure:
- - Previous ```#main``` wrapper is now called ```#reveal```
- - Slides were moved one level deeper, into ```#reveal .slides```
- - Controls and progress bar were moved into ```#reveal```
- - CSS is now much more explicit, rooted at ```#reveal```, to prevent conflicts
- - Config option for disabling updates to URL, defaults to true
- - Anchors with image children no longer rotate in 3D on hover
- - Support for mouse wheel navigation ([naugtur](https://github.com/naugtur))
- - Delayed updates to URL hash to work around a bug in Chrome
- - Included a ```classList``` polyfill for IE9
- - Support for wireless presenter keys
- - States can now be applied as classes on the document element by adding ```data-state``` on a slide
-
- #### 1.1
-
- - Added an optional presentation progress bar
- - Images wrapped in anchors no longer unexpectedly flip in 3D
- - Slides that contain other slides are given the 'stack' class
- - Added ```transition``` option for specifying transition styles
- - Added ```theme``` option for specifying UI styles
- - New transitions: ```box``` & ```page```
- - New theme: ```neon```
-
- #### 1.0
-
- - New and improved style
- - Added controls in bottom right which indicate where you can navigate
- - Reveal views in iteratively by giving them the ```.fragment``` class
- - Code sample syntax highlighting thanks to [highlight.js](http://softwaremaniacs.org/soft/highlight/en/description/)
- - Initialization options (toggling controls, toggling rolling links, transition theme)
-
- #### 0.3
-
- - Added licensing terms
- - Fixed broken links on touch devices
-
- #### 0.2
-
- - Refactored code and added inline documentation
- - Slides now have unique URL's
- - A basic API to invoke navigation was added
-
- #### 0.1
-
- - First release
- - Transitions and a white theme
+ ## PDF Export
+
+ Presentations can be exported to PDF via a special print stylesheet. This feature requires that you use [Google Chrome](http://google.com/chrome).
+ Here's an example of an exported presentation that's been uploaded to SlideShare: http://www.slideshare.net/hakimel/revealjs-13872948.
+
+ 1. Open your presentation with [css/print/pdf.css](https://github.com/hakimel/reveal.js/blob/master/css/print/pdf.css) included on the page. The default index HTML lets you add *print-pdf* anywhere in the query to include the stylesheet, for example: [lab.hakim.se/reveal-js?print-pdf](http://lab.hakim.se/reveal-js?print-pdf).
+ 2. Open the in-browser print dialog (CMD+P).
+ 3. Change the **Destination** setting to **Save as PDF**.
+ 4. Change the **Layout** to **Landscape**.
+ 5. Change the **Margins** to **None**.
+ 6. Click **Save**.
+
+ 
+
+
+ ## Speaker Notes
+
+ reveal.js comes with a speaker notes plugin which can be used to present per-slide notes in a separate browser window. The notes window also gives you a preview of the next upcoming slide so it may be helpful even if you haven't written any notes. Append ```?notes``` to presentation URL or press the 's' key on your keyboard to open the notes window.
+
+ By default notes are written using standard HTML, see below, but you can add a ```data-markdown``` attribute to the ```<aside>``` to write them using Markdown.
+
+ ```html
+ <section>
+ <h2>Some Slide</h2>
+
+ <aside class="notes">
+ Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
+ </aside>
+ </section>
+ ```
+
+ ## Server Side Speaker Nodes
+
+ In some cases it can be desirable to run notes on a separate device from the one you're presenting on. The Node.js-based notes plugin lets you do this using the same note definitions as its client side counterpart. Include the requried scripts by adding the following dependencies:
+
+ ```javascript
+ { src: '/socket.io/socket.io.js', async: true },
+ { src: 'plugin/notes-server/client.js', async: true }
+ ```
+
+ Then:
+
+ 1. Install [Node.js](http://nodejs.org/)
+ 2. Run ```npm install```
+ 3. Run ```node plugin/notes-server```
+
+
+ ## Theming
+
+ The framework comes with a few different themes included:
+
+ - default: Gray background, white text, blue links
+ - beige: Beige background, dark text, brown links
+ - sky: Blue background, thin white text, blue links
+ - night: Black background, thick white text, orange links
+ - serif: Cappuccino background, gray text, brown links
+ - simple: White background, black text, blue links
+
+ Each theme is available as a separate stylesheet. To change theme you will need to replace **default** below with your desired theme name in index.html:
+
+ ```html
+ <link rel="stylesheet" href="css/theme/default.css" id="theme">
+ ```
+
+ If you want to add a theme of your own see the instructions here: [/css/theme/README.md](https://github.com/hakimel/reveal.js/blob/master/css/theme/README.md).
+
+
+ ## Development Environment
+
+ reveal.js is built using the task-based command line build tool [grunt.js](http://gruntjs.com) ([installation instructions](https://github.com/gruntjs/grunt#installing-grunt)). With Node.js and grunt.js installed, you need to start by running ```npm install``` in the reveal.js root. When the dependencies have been installed you should run ```grunt watch``` to start monitoring files for changes.
+
+ If you want to customise reveal.js without running grunt.js you can alter the HTML to point to the uncompressed source files (css/reveal.css & js/reveal.js).
+
+ ### Folder Structure
+ - **css/** Core styles without which the project does not function
+ - **js/** Like above but for JavaScript
+ - **plugin/** Components that have been developed as extensions to reveal.js
+ - **lib/** All other third party assets (JavaScript, CSS, fonts)
+
## License
projects / reveal.js.git / commitdiff