First gloabbly install reveal-md which is markdown files to reveal.js builder.
npm install -g reveal-mdThen use command below to install plugins.
bower installThen use the command below to launch the desired slideshow in a browser.
$ reveal-md session1.mdIn development you can use --watch command for auto refresh.
$ reveal-md session1.md --watchFor further instructions you can visit reveal-md documentation.
{
"template": "assets/template.html",
"theme": "assets/style/black.css",
"css": "assets/style/slide-theme.css",
"highlightTheme": "gruvbox-dark",
"separator": "\n---\n",
"verticalSeparator": "\n----\n"
}
{
"controls": true,
"controlsTutorial": true,
"controlsLayout": "bottom-right",
"controlsBackArrows": "faded",
"progress": true,
"slideNumber": false,
"history": true,
"keyboard": true,
"overview": true,
"center": true,
"touch": true,
"loop": false,
"rtl": false,
"shuffle": false,
"fragments": true,
"fragmentInURL": false,
"embedded": false,
"help": true,
"showNotes": false,
"autoPlayMedia": null,
"autoSlide": 0,
"autoSlideStoppable": true,
"autoSlideMethod": "Reveal.navigateNext",
"defaultTiming": 120,
"mouseWheel": false,
"hideAddressBar": true,
"previewLinks": false,
"viewDistance": 3,
"parallaxBackgroundHorizontal": null,
"parallaxBackgroundVertical": null,
"display": "block",
"transition": "slide"
}
<!-- .slide: data-background="#be1d2c" -->
# Slide Background Color
---
<!-- .slide: data-background-image="https://facebook.github.io/create-react-app/img/logo-og.png" data-background-size="100px" data-background-repeat="repeat" -->
## Slide Image Background
---
# Inline Styling <!-- .element: style="text-align: left" -->
---
### Fragments
Highlight Red <!-- .element: class="fragment highlight-red" -->
Highlight Blue <!-- .element: class="fragment highlight-blue" -->
Highlight Green <!-- .element: class="fragment highlight-green" -->
- Growing List Item <!-- .element: class="fragment grow" -->
- Shrinking List Item <!-- .element: class="fragment shrink" -->
- Fading Out List Item <!-- .element: class="fragment fade-out" -->
- Fading In List Item <!-- .element: class="fragment fade-in" -->
---
# You can give a class to element <!-- .element: class="a-class" -->
# You can give an id to element <!-- .element: id="importantElement" -->
See Github Mastering Markdown guide for advanced usage.
# First Slide Title
* List item 1
* List item 2
---
## Second Slide
> Best quote ever.
Note: speaker notes FTW!
---
## Third slide with code example
```js
// Basic console prompt
console.log('Hello World');
```
---
## Fourth slide with image
Welcome to VNGRS
---
title: Foobar
separator: <!--s-->
verticalSeparator: <!--v-->
theme: solarized
revealOptions:
transition: 'fade'
---
Foo
Note: test note
<!--s-->
# Bar
<!--v-->
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent