Giter VIP home page Giter VIP logo

oyddc's Introduction

Reveal Jekyll

Build Status Gem Version

Reveal.js Web presentation served with jekyll. Find all the reveal.js documentation the default plugins are already package in reveal jekyll. If you have any request, problems please open an issue. Feel free to implement any change and open through pull requests. ๐Ÿ˜‰

Set up

Make sure to install bundle which will ease the installation of jekyll:

gem install bundle
bundle install

Run the presentation ()it zill be one localhost:4000 using

bundle exec jekyll serve

Create your presentation

Raw Markdown

Take a look at the example, In index.html use the layout: raw and then you can create your slides directly in the file using markdown:

  • ___: Makes a basement slide
  • ---: Makes the next slide

One file slides example

Your index.html could look like:

---
layout: raw
---

## First slide
---
## Second slide
___
Second slide's basement
---
## Third slide

Using Jekyll capabilities

Take a look at the example slides and basements, In index.html use the layout: presentation. It will use the _slides and _basements folder to create the presentation.

Slide

Use the _slides folder to create a file per slide in markdown.

---
background: ...                 # Optional to put an image or a color as the background
video: "http://video-link.mp4"  # Optional to put a video as the background
transition: slide               # Optional change the transition type for this slide
---

Slide content in markdown

Don't forget to add the two ---.

To order the presentation you can do something like 01-First-slide-title.md, 02-Second-slide-title.md.

Basement slides

Basement slides can be put in the _basements folder.

The Basement slides will be accessible using the down arrow when on a particular slide. They are connected by the slide attribute which is the filename of the slide.

They are the sub sections of your presentation:

---
slide: slide-title
---
 
Content of the Basement slide in markdown

e.g:

  • For a slide called 02-slide.md
  • The basement of that slide 02-1-basement.md should have the attribute slide: 02-slide

Config

Configure Reveal.js in teh _config.yml:

reveal:
  transition: "slide" # none/fade/slide/convex/concave/zoom
  theme: "black" # beige/blood/league/moon/night/serif/simple/sky/solarized/white

You can set globally the transitions and theme of your presentation.

Export presentation

To export the presentation use ?print-pdf at the end of the url to be able to save the page as PDF:

<url>:<port>/<base url>/?print-pdf

Try it at .../Reveal-Jekyll/?print-pdf

Use as a gem

There is a Dockerfile available, check it out to see how to use the theme in a Docker. Basically you need 4 things to make it work as a gem:

  • The Gemfile with the reveal-jekyll gem: gem 'reveal-jekyll' (specify the version with , '~> 0.0.2')
  • The index.html which is the entrypoint of your jekyll site and presentation (with explained above configuration)
  • The _config.yml which defines your theme configuration.
  • The presentation, assets and content you want to display.

And that's it you'd be good to roll!

License

Reveal Jekyll

Reveal Jekyll MIT licensed

Copyright (c) 2019-present Sylhare \o/

Reveal.js

Reveal.js MIT licensed

Copyright (C) 2011-present Hakim El Hattab, http://hakim.se

Jekyll

Jekyll MIT licensed

Copyright (c) 2008-present Tom Preston-Werner and Jekyll contributors

oyddc's People

Contributors

tuxtter avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.