documentation for multi-instance initialization
This commit is contained in:
Hakim El Hattab
parent
6d65d8a73a
commit
3a2299a622
191
README.md
191
README.md
@ -14,12 +14,8 @@ This project was started and is maintained by [@hakimel](https://github.com/haki
|
|||||||
- [Installation](#installation)
|
- [Installation](#installation)
|
||||||
- [Basic setup](#basic-setup)
|
- [Basic setup](#basic-setup)
|
||||||
- [Full setup](#full-setup)
|
- [Full setup](#full-setup)
|
||||||
- [Folder Structure](#folder-structure)
|
|
||||||
- [Instructions](#instructions)
|
|
||||||
- [Markup](#markup)
|
- [Markup](#markup)
|
||||||
- [Markdown](#markdown)
|
- [Initialization](#initialization)
|
||||||
- [Element Attributes](#element-attributes)
|
|
||||||
- [Slide Attributes](#slide-attributes)
|
|
||||||
- [Configuration](#configuration)
|
- [Configuration](#configuration)
|
||||||
- [Presentation Size](#presentation-size)
|
- [Presentation Size](#presentation-size)
|
||||||
- [Dependencies](#dependencies)
|
- [Dependencies](#dependencies)
|
||||||
@ -49,6 +45,10 @@ This project was started and is maintained by [@hakimel](https://github.com/haki
|
|||||||
- [Stretching elements](#stretching-elements)
|
- [Stretching elements](#stretching-elements)
|
||||||
- [Resize Event](#resize-event)
|
- [Resize Event](#resize-event)
|
||||||
- [postMessage API](#postmessage-api)
|
- [postMessage API](#postmessage-api)
|
||||||
|
- [Markdown](#markdown)
|
||||||
|
- [External Markdown](#external-markdown)
|
||||||
|
- [Element Attributes](#element-attributes)
|
||||||
|
- [Slide Attributes](#slide-attributes)
|
||||||
- [PDF Export](#pdf-export)
|
- [PDF Export](#pdf-export)
|
||||||
- [Theming](#theming)
|
- [Theming](#theming)
|
||||||
- [Speaker Notes](#speaker-notes)
|
- [Speaker Notes](#speaker-notes)
|
||||||
@ -98,14 +98,9 @@ Some reveal.js features, like external Markdown and speaker notes, require that
|
|||||||
$ git clone https://github.com/hakimel/reveal.js.git
|
$ git clone https://github.com/hakimel/reveal.js.git
|
||||||
```
|
```
|
||||||
|
|
||||||
1. Navigate to the reveal.js folder
|
1. Move to the reveal.js folder and install dependencies
|
||||||
```sh
|
```sh
|
||||||
$ cd reveal.js
|
$ cd reveal.js && npm install
|
||||||
```
|
|
||||||
|
|
||||||
1. Install dependencies
|
|
||||||
```sh
|
|
||||||
$ npm install
|
|
||||||
```
|
```
|
||||||
|
|
||||||
1. Serve the presentation and monitor source files for changes
|
1. Serve the presentation and monitor source files for changes
|
||||||
@ -117,17 +112,7 @@ Some reveal.js features, like external Markdown and speaker notes, require that
|
|||||||
|
|
||||||
You can change the port by using `npm start -- --port=8001`.
|
You can change the port by using `npm start -- --port=8001`.
|
||||||
|
|
||||||
### Folder Structure
|
## Markup
|
||||||
|
|
||||||
- **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)
|
|
||||||
|
|
||||||
|
|
||||||
## Instructions
|
|
||||||
|
|
||||||
### Markup
|
|
||||||
|
|
||||||
Here's a barebones example of a fully working reveal.js presentation:
|
Here's a barebones example of a fully working reveal.js presentation:
|
||||||
```html
|
```html
|
||||||
@ -165,79 +150,35 @@ The presentation markup hierarchy needs to be `.reveal > .slides > section` wher
|
|||||||
</div>
|
</div>
|
||||||
```
|
```
|
||||||
|
|
||||||
### Markdown
|
It's also possible to write presentations using [Markdown](#markdown).
|
||||||
|
|
||||||
It's possible to write your slides using Markdown. To enable Markdown, add the `data-markdown` attribute to your `<section>` elements and wrap the contents in a `<textarea data-template>` like the example below. You'll also need to add the `plugin/markdown/marked.js` and `plugin/markdown/markdown.js` scripts (in that order) to your HTML file. _Note: both these dependencies are already included in the default `index.html`._
|
### Initialization
|
||||||
|
|
||||||
This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) modified to use [marked](https://github.com/chjj/marked) to support [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown). Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).
|
If you only have a single presentation on the page we recommend initializing reveal.js using the singleton API.
|
||||||
|
```js
|
||||||
```html
|
Reveal.initialize({ keyboard: true });
|
||||||
<section data-markdown>
|
|
||||||
<textarea data-template>
|
|
||||||
## Page title
|
|
||||||
|
|
||||||
A paragraph with some text and a [link](http://hakim.se).
|
|
||||||
</textarea>
|
|
||||||
</section>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
#### External Markdown
|
The `initialize` method returns a promise which will resolve as soon as the presentation is ready and can be interacted with via the API.
|
||||||
|
```js
|
||||||
You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule) and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `notes?:`, so it will match both "note:" and "notes:"). The `data-charset` attribute is optional and specifies which charset to use when loading the external file.
|
Reveal.initialize.then( () => {
|
||||||
|
// reveal.js is ready
|
||||||
When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). The following example customises all available options:
|
} )
|
||||||
|
|
||||||
```html
|
|
||||||
<section data-markdown="example.md"
|
|
||||||
data-separator="^\n\n\n"
|
|
||||||
data-separator-vertical="^\n\n"
|
|
||||||
data-separator-notes="^Note:"
|
|
||||||
data-charset="iso-8859-15">
|
|
||||||
<!--
|
|
||||||
Note that Windows uses `\r\n` instead of `\n` as its linefeed character.
|
|
||||||
For a regex that supports all operating systems, use `\r?\n` instead of `\n`.
|
|
||||||
-->
|
|
||||||
</section>
|
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Element Attributes
|
If you want to run multiple presentations side-by-side on the same page you can create instances of the Reveal class. Note that you will also need to set the `embedded` config option to true.
|
||||||
|
|
||||||
Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
|
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<section data-markdown>
|
<div class="reveal deck-1">...</div>
|
||||||
<script type="text/template">
|
<div class="reveal deck-2">...</div>
|
||||||
- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
|
<script type="module">
|
||||||
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
|
import Reveal from 'js/reveal.js';
|
||||||
|
|
||||||
|
let deck1 = new Reveal( document.querySelector( 'deck-1' ), { embedded: true } );
|
||||||
|
let deck2 = new Reveal( document.querySelector( 'deck-2' ), { embedded: true } );
|
||||||
|
|
||||||
|
deck1.initialize();
|
||||||
|
deck2.initialize();
|
||||||
</script>
|
</script>
|
||||||
</section>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Slide Attributes
|
|
||||||
|
|
||||||
Special syntax (through HTML comments) is available for adding attributes to the slide `<section>` elements generated by your Markdown.
|
|
||||||
|
|
||||||
```html
|
|
||||||
<section data-markdown>
|
|
||||||
<script type="text/template">
|
|
||||||
<!-- .slide: data-background="#ff0000" -->
|
|
||||||
Markdown content
|
|
||||||
</script>
|
|
||||||
</section>
|
|
||||||
```
|
|
||||||
|
|
||||||
#### Configuring *marked*
|
|
||||||
|
|
||||||
We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise marked's rendering, you can pass in options when [configuring Reveal](#configuration):
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
Reveal.initialize({
|
|
||||||
// Options which are passed into marked
|
|
||||||
// See https://marked.js.org/#/USING_ADVANCED.md#options
|
|
||||||
markdown: {
|
|
||||||
smartypants: true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
```
|
```
|
||||||
|
|
||||||
### Configuration
|
### Configuration
|
||||||
@ -1253,6 +1194,80 @@ Reveal.initialize({
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Markdown
|
||||||
|
|
||||||
|
It's possible to write your slides using Markdown. To enable Markdown, add the `data-markdown` attribute to your `<section>` elements and wrap the contents in a `<textarea data-template>` like the example below. You'll also need to add the `plugin/markdown/marked.js` and `plugin/markdown/markdown.js` scripts (in that order) to your HTML file. _Note: both these dependencies are already included in the default `index.html`._
|
||||||
|
|
||||||
|
This is based on [data-markdown](https://gist.github.com/1343518) from [Paul Irish](https://github.com/paulirish) modified to use [marked](https://github.com/chjj/marked) to support [GitHub Flavored Markdown](https://help.github.com/articles/github-flavored-markdown). Sensitive to indentation (avoid mixing tabs and spaces) and line breaks (avoid consecutive breaks).
|
||||||
|
|
||||||
|
```html
|
||||||
|
<section data-markdown>
|
||||||
|
<textarea data-template>
|
||||||
|
## Page title
|
||||||
|
|
||||||
|
A paragraph with some text and a [link](http://hakim.se).
|
||||||
|
</textarea>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
### External Markdown
|
||||||
|
|
||||||
|
You can write your content as a separate file and have reveal.js load it at runtime. Note the separator arguments which determine how slides are delimited in the external file: the `data-separator` attribute defines a regular expression for horizontal slides (defaults to `^\r?\n---\r?\n$`, a newline-bounded horizontal rule) and `data-separator-vertical` defines vertical slides (disabled by default). The `data-separator-notes` attribute is a regular expression for specifying the beginning of the current slide's speaker notes (defaults to `notes?:`, so it will match both "note:" and "notes:"). The `data-charset` attribute is optional and specifies which charset to use when loading the external file.
|
||||||
|
|
||||||
|
When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). The following example customises all available options:
|
||||||
|
|
||||||
|
```html
|
||||||
|
<section data-markdown="example.md"
|
||||||
|
data-separator="^\n\n\n"
|
||||||
|
data-separator-vertical="^\n\n"
|
||||||
|
data-separator-notes="^Note:"
|
||||||
|
data-charset="iso-8859-15">
|
||||||
|
<!--
|
||||||
|
Note that Windows uses `\r\n` instead of `\n` as its linefeed character.
|
||||||
|
For a regex that supports all operating systems, use `\r?\n` instead of `\n`.
|
||||||
|
-->
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Element Attributes
|
||||||
|
|
||||||
|
Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<section data-markdown>
|
||||||
|
<script type="text/template">
|
||||||
|
- Item 1 <!-- .element: class="fragment" data-fragment-index="2" -->
|
||||||
|
- Item 2 <!-- .element: class="fragment" data-fragment-index="1" -->
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Slide Attributes
|
||||||
|
|
||||||
|
Special syntax (through HTML comments) is available for adding attributes to the slide `<section>` elements generated by your Markdown.
|
||||||
|
|
||||||
|
```html
|
||||||
|
<section data-markdown>
|
||||||
|
<script type="text/template">
|
||||||
|
<!-- .slide: data-background="#ff0000" -->
|
||||||
|
Markdown content
|
||||||
|
</script>
|
||||||
|
</section>
|
||||||
|
```
|
||||||
|
|
||||||
|
### Configuring *marked*
|
||||||
|
|
||||||
|
We use [marked](https://github.com/chjj/marked) to parse Markdown. To customise marked's rendering, you can pass in options when [configuring Reveal](#configuration):
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
Reveal.initialize({
|
||||||
|
// Options which are passed into marked
|
||||||
|
// See https://marked.js.org/#/USING_ADVANCED.md#options
|
||||||
|
markdown: {
|
||||||
|
smartypants: true
|
||||||
|
}
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
## PDF Export
|
## PDF Export
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user