FsReveal - Formatting

FsReveal uses Markdown as source for your slides and renders these as HTML pages. Whenever the following markdown formatting tips don't work you can always use HTML.

Slides

Slides are always started with a *** marker:

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16:

***

### My first slide

* bullet point 1
* bullet point 2
* bullet point 3

***

### My second slide
#### A subtitle

* bullet point 1
* bullet point 2
* bullet point 3

Open the demo and use the arrow keys to navigate through the slides.

Vertical slides

Slides can be nested inside of each other. Use --- to indicate a nested slide:

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15:

***

### My first slide

* bullet point 1
* bullet point 2
* bullet point 3

---

### My first nested slide

* bullet point 1
* bullet point 2
* bullet point 3

Open the demo and use the Space key to navigate through all slides.

Images

You can put images into the slides/images folder and use them with the following syntax:

1: 
2: 
3: 
4: 
5:

***

### My first slide

![an alternative text](images/logo.png)

Open the demo and see how the image is rendered.

Speaker notes

Speaker notes are prefixed with a ' marker:

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10:

***

### My first slide

* bullet point 1
* bullet point 2
* bullet point 3

' this is a speaker note
' and here we have another one

Open the demo and press the s key to see the speaker notes.

Custom stylesheets

Create a custom stylesheet in slides/custom.css and then you can use these CSS classes in your slides.

Slide properties

Slide properties allow you to customize things like the background of a slide:

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19:

***
- data-background : #441111

### My first slide

* bullet point 1
* bullet point 2
* bullet point 3

***
- data-background : images/smalllogo.png
- data-background-repeat : repeat
- data-background-size : 100px

### Second slide

* bullet point 1
* bullet point 2
* bullet point 3

Open the demo to see the effect of the slide properties.

Named slides

Slide properties also allow to name slides. You can then reference slides by name in links.

 1: 
 2: 
 3: 
 4: 
 5: 
 6: 
 7: 
 8: 
 9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45:

***
- id : toc

### Table of contents

* [Chapter 1](#/chapter-1)
* [Chapter 2](#/chapter-2)
    * [Chapter 2-1](#/chapter-2-1)
    * [Chapter 2-2](#/chapter-2-2)

***
- id : chapter-1

### Chapter 1

* bullet point 1
* bullet point 2
* bullet point 3

***
- id : chapter-2

### Chapter 2

* bullet point 1
* bullet point 2
* bullet point 3

---
- id : chapter-2-1

#### Chapter 2.1

* bullet point 1
* bullet point 2
* bullet point 3

---
- id : chapter-2-2

#### Chapter 2.2

* bullet point 1
* bullet point 2
* bullet point 3

Open the demo to see the effect of the named slides.