remark README

The project's README from github.com/gnab/remark. As one markdown file: README.md.

remark

Build Status CDNJS xscode Donate

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

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 (the -local one requires building remark first), 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:

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

Thanks goes to these people for their contributions:

License

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

remark (gnab/remark)

Searching Database…

13K ·GitHub
Remark
What is this?remark is a simple, in-browser, markdown-driven slideshow tool aimed at people comfortable with HTML and CSS. You write your slides in Markdown and remark renders them as a live slideshow in the browser.
Is this a JavaScript library I need to build, or just a plain HTML file I open in a browser?It's just a plain HTML file: you create one HTML file containing your Markdown slides and open it directly in a browser, no build step required.
How do I get a slideshow running?Create an HTML boilerplate file, open it in a browser, then edit the Markdown content and CSS styles and refresh to see changes.
Do I need Node or a build tool to use it?No, remark bundles the markdown parser itself and runs straight in the browser from a single HTML file; Node is only needed if you want to build remark locally for the '-local' boilerplate.
Can I export my slideshow to a clean PDF?You can print to PDF using Chrome, but the styling won't be exact; for accurate PDF export the README recommends using DeckTape instead.
Who is this slideshow tool meant for?It's aimed at people who are comfortable writing HTML and CSS themselves, such as developers giving tech talks or lectures, rather than non-technical presenters.
Does the presentation work on tablets and phones too?Yes, remark includes touch support with swipe gestures so slideshows work on smart phones and pads as well as desktop browsers.
How do I use presenter mode with speaker notes?Press C to clone the display into a second window, then press P on that cloned window to switch it into presenter mode, which shows your Markdown-formatted speaker notes alongside the slides.
Does remark support syntax-highlighted code blocks?Yes, it has built-in syntax highlighting supporting a range of programming languages for code shown on slides.
Where do I find templating and API documentation?The project's GitHub wiki pages contain the how-to, templating, and API documentation for customizing slides.
Do slides look the same on different screen sizes?Yes, remark scales slides so they have a similar appearance across different devices and resolutions.
What are similar projects?nodeppt, reveal.js, frontend-slides, editor.md, html-ppt-skill, marp, impress.js, open-slide
Which topics is it in?slideshow, navigation, touch, slides, templates, presentation, syntax-highlighting, javascript-library, pdf, css, html, markdown
Creator
gnab
Size
7 MB
Stars
13K
Updated
CommitJun 27Releasev0.15.0Jan 18
Age
15y
Commits · 90 Days