Giter VIP home page Giter VIP logo

remark's Introduction

remark

Build Status CDNJS Donate

A simple, in-browser, markdown-driven slideshow tool targeted at people who know their way around HTML and CSS, featuring:

  • Markdown formatting, with smart extensions
  • Presenter mode with markdown formatted speaker notes and cloned slideshow view
  • Syntax highlighting, supporting a range of languages
  • Slide scaling, thus similar appearance on all devices / resolutions
  • Simple markdown templates for customized slides
  • Touch support for smart phones and pads, i.e. swipe to navigate slides

Check out this remark slideshow for a brief introduction.

To render your Markdown-based slideshow on the fly, checkout Remarkise.

Getting Started

It takes only a few, simple steps to get up and running with remark:

  1. Create an HTML file to contain your slideshow (see boilerplate below)
  2. Open the HTML file in a decent browser
  3. Edit the Markdown and/or CSS styles as needed, save and refresh!
  4. Press C to clone a display; then press P to switch to presenter mode. Open help menu with h.

See any of the boilerplate-*.html files, or just copy the boilerplate HTML below to start:

<!DOCTYPE html>
<html>
  <head>
    <title>Title</title>
    <meta charset="utf-8">
    <style>
      @import url(https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz);
      @import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700,400italic);
      @import url(https://fonts.googleapis.com/css?family=Ubuntu+Mono:400,700,400italic);

      body { font-family: 'Droid Serif'; }
      h1, h2, h3 {
        font-family: 'Yanone Kaffeesatz';
        font-weight: normal;
      }
      .remark-code, .remark-inline-code { font-family: 'Ubuntu Mono'; }
    </style>
  </head>
  <body>
    <textarea id="source">

class: center, middle

# Title

---

# Agenda

1. Introduction
2. Deep-dive
3. ...

---

# Introduction

    </textarea>
    <script src="https://remarkjs.com/downloads/remark-latest.min.js">
    </script>
    <script>
      var slideshow = remark.create();
    </script>
  </body>
</html>

How To Use remark

The wiki pages contain all the how-to, templating, and API help.

Real-world remark slideshows

On using remark:

Other interesting stuff:

Other systems integrating with remark

Printing

Converting to PDF is primarily supported via Chrome's Print to PDF feature. Note that the styling is not exact; See #50 for some recommended CSS to add to your styles.

Alternatively, you can use DeckTape, a PDF exporter for HTML presentation frameworks that provides support for remark.

Contributors

License

remark is licensed under the MIT license. See LICENSE for further details.

remark's People

Contributors

gnab avatar kimjoar avatar dantup avatar freakboy3742 avatar pospi avatar joel-porquet avatar nanoant avatar schnz avatar tripu avatar gcapes avatar gurjeet avatar gureckis avatar torgeir avatar kt3k avatar alexander-brett avatar gaul avatar astefanutti avatar venthur avatar bkeepers avatar brenopolanski avatar bfagundez avatar camerond avatar c3er avatar avdv avatar danielstankiewicz avatar pvnr0082t avatar dirkhusemann avatar kud avatar obfusk avatar chadrien avatar

Watchers

James Cloos 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.