## Presentation in Jekyll Using Reveal.js **Reveal.js** is a "HTML presentation framework." [Click](http://lab.hakim.se/reveal-js) for an introduction. Source: [ahxxm.github.io](https://github.com/ahxxm/ahxxm.github.io/blob/master/_posts/2016-09-06-slide-en.md)
### Choose Your Pill [slides.com](https://slides.com) could be better, it offers full functional web interface. Good: easy to use, easy to use, easy to use. Bad: - **hard** to trace edit history - default public: except you have a hard-to-guess username - not quite geek(well..)
### Install We need a `slide` layout for presentations: just add this [slide.html](https://raw.githubusercontent.com/ahxxm/ahxxm.github.io/master/_layouts/slide.html) to `_layouts` directory. Create new post using this layout: ```yaml --- layout: slide title: Presentation in Jekyll description: Web presentation in Jekyll using Reveal.js theme: league transition: fade permalink: /152.moew/ --- your post inside(format will be covered in next slide) ```

Usage

Now you can write presentation slides:

  1. presentation template in _layouts... done!
  2. one section for one slide... ↓
### Presentation Layout Pages are organized horizontally. Use nested sections to create vertical pages, ↓
Like [this](https://github.com/hakimel/reveal.js/blob/3.3.0/demo.html#L58).

That's it!

Check official demo and its code for advanced usage.

Tips

  1. press "." -- the one near "?" -- to pause, it will black out contents
  2. press "Esc" for an overview
  3. only .md files will be rendered by Jekyll

More Tips

  1. HTML style section on head of post will overwrite default ones(e.g. center aligned text)
  2. use back quote ` for HTML tag in markdown section.. is not viable, go write html or use special syntax
  3. slide and fade page transition animation are generally acceptable
## Links - [Jekyll: Create Slides with reveal.js](http://luugiathuy.com/2015/04/jekyll-create-slides-with-revealjs/) - [hakimel/reveal.js](https://github.com/hakimel/reveal.js/) - [Slides.com Knowledge Base](http://help.slides.com/knowledgebase) - [CDNjs](https://cdnjs.com/libraries/reveal.js), speeds up site loading