1.Move to the reveal.js folder and install dependencies
```sh
$ cd reveal.js
```
1. Install dependencies
```sh
$ npm install
$ cd reveal.js && npm install
```
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`.
### 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)
## Instructions
### Markup
## Markup
Here's a barebones example of a fully working reveal.js presentation:
```html
...
...
@@ -165,79 +150,35 @@ The presentation markup hierarchy needs to be `.reveal > .slides > section` wher
</div>
```
### 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
<sectiondata-markdown>
<textareadata-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.
It's also possible to write presentations using [Markdown](#markdown).
When used locally, this feature requires that reveal.js [runs from a local web server](#full-setup). The following example customises all available options:
### Initialization
```html
<sectiondata-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>
If you only have a single presentation on the page we recommend initializing reveal.js using the singleton API.
```js
Reveal.initialize({keyboard:true});
```
#### Element Attributes
Special syntax (through HTML comments) is available for adding attributes to Markdown elements. This is useful for fragments, amongst other things.
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
Reveal.initialize.then(()=>{
// reveal.js is ready
})
```
#### Slide Attributes
Special syntax (through HTML comments) is available for adding attributes to the slide `<section>` elements generated by your Markdown.
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.
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
}
});
deck1.initialize();
deck2.initialize();
</script>
```
### 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
<sectiondata-markdown>
<textareadata-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
<sectiondata-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.
Special syntax (through HTML comments) is available for adding attributes to the slide `<section>` elements generated by your Markdown.
```html
<sectiondata-markdown>
<script type="text/template">
<!--.slide:data-background="#ff0000"-->
Markdowncontent
</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
