Giter Site home page Giter Site logo

ahnesbitt / slides-in-markdown Goto Github PK

View Code? Open in Web Editor NEW

This project forked from technopagan/slides-in-markdown

0.0 2.0 0.0 2.7 MB

Slide deck tool for giving presentations written in MarkDown. Based on remark.js and written in plain HTML, CSS & JS. Features presenter console with speaker notes, timer, screen blanking and more. The theme provides all basic requirements for slide contents (images, video, code snippets etc) and gives you many small helpers to style contents.

Home Page: https://technopagan.github.io/slides-in-markdown/

HTML 46.46% CSS 53.54%

slides-in-markdown's Introduction

Slides in MarkDown

This is a slide deck tool for giving presentations written in MarkDown. It is based on Remark.js and written in plain HTML, CSS & JS, making it compatible with all operating systems. It features a presenter console with speaker notes, timer, screen blanking and more.

Live Demo

Writing

To start writing your own slide deck in MarkDown, simply open the HTML file in your editor of choice and make changes as you wish. You can find all the places that you should edit by searching for the '#ToDo' hashtag inside the HTML file. Here are the different places in detail:

  1. Write your presentation's title in the 'title' tag of the 'head' section
  2. Set '16:9' or '4:3' dimensions in the body.onload JavaScript
  3. Write your slides in MarkDown as shown in the examples
  4. Be inspiring!

Presenting

  1. Open the HTML file in a browser (via 'file://' or local webserver)
  2. Press 'c' to clone the current view into a new, synced window
  3. Press 'p' in the original window to enter Presenter Console
  4. Move the cloned window to projector / screen display
  5. Press 'f' to make the cloned window fullscreen
  6. Enjoy!

Hint: You can always press 'h' to see an overview of all available key commands.

Exporting to PDF

  1. Install DeckTape
  2. Start a local webserver inside slide deck directory (e.g. with 'python -m http.server')
  3. Go to your local DeckTape repository using the terminal
  4. Run: './bin/phantomjs decktape.js http://127.0.0.1:8080/slidedeck.html slidedeck.pdf
  5. Be proud of your beautiful slidedeck.pdf file!

Theming

If you want, you can customize the looks of your slide deck by simply editing the CSS file with your favorite code editor. Colors, fonts and layout are completely customizable as if you were editing a regular website.

Inspiration

The need for me to create this tool arose from using & loving the wonderful DeckSetApp for Mac. Sadly, DeckSetApp is an OSX-only app, so when switching operating systems, I could not rely on it anymore. I tried many alternatives & frameworks, but the difficulty of use or lack of documentation made them unbearable. With this tool I intend to lower the bar for creating all-OS, MarkDown-based slide decks with presenter console, speaker notes, PDF export that run in the browser.

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.