❤
npm
Sign UpSign In

remark-slide

0.14.0 • Public • Published

remark

Build Status 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 cloned slideshow view
  • Syntax highlighting, supporting a range of languages
  • Slide scaling, thus similar appearance on all devices / resolutions
  • 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 a HTML file to contain your slideshow (see below)
  2. Open the HTML file in a decent browser
  3. Edit the Markdown and/or CSS styles as needed, save and refresh!

Below is a boilerplate HTML file to get you started:

<!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://gnab.github.io/remark/downloads/remark-latest.min.js">
    </script> 
    <script>
      var slideshow = remark.create();
    </script> 
  </body>
</html>

Moving On

For more information on using remark, please check out the wiki pages.

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. You may need to tweak a bit to have the PDF look as expected as Chrome's print preview tends to change with every new release of Chrome (See #50 for some details).

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.

Readme

Keywords

none

Package Sidebar

Install

npm i remark-slide

Repository

github.com/gnab/remark

Homepage

github.com/gnab/remark#readme

Weekly Downloads

24

Version

0.14.0

License

MIT

Last publish

Collaborators

  • hirokiky
Try on RunKit
Report malware