Home

Awesome

remarker v1.15.0

ci codecov

Remark cli

remark is a simple, in-browser, markdown-driven slideshow tool. remarker is a command line tool for building a remark-based slideshow page very easily.

Usage

Install via npm:

$ npm install --save remarker

Write your slide in markdown:

# My Slide

---

# My Slide 2

???

Presenter notes here

---

save the above as slides.md

Invoke remarker command.

$ ./node_modules/.bin/remarker

Or if you have npx command, then hit:

$ npx remarker

This starts a local server at port 6275 (this is configurable) and you can see your slides at http://localhost:6275/.

See remark's slide and documentation for more details about its syntax, features etc.

Build slides

You can build your slides as static page as remarker build command.

$ ./node_modules/.bin/remarker build

This builds your slides as html page under build/ directory. The output directory is configurable. See the below for details.

Installing globally

You can instead install it globally, in one of these two ways:

sudo npm i -g remarker    # from the npm repository
sudo npm i -g .           # if there's a clone in the current directory

After that, you should be able to invoke it this way from any directory in your system:

remarker [build]

Configuration

You can configure remarker with the configuration file remarker.yml:

(Note: remarker.yml should be put in the current directory.)

Default settings are as follows:

port: 6275
dest: build
out: index.html
source: slides.md
title: ''
assets: ['assets']
css: ''
cssFiles: []
script: ''
scriptFiles: []
remarkConfig: {}
remarkPath: moduleDir + '/vendor/remark.js'
scriptFilesAfterCreate: []
livereload: true
livereloadPort: 35729

Basic options

Advanced options

CLI Usage

<!-- Notes: This help message is stored in //assets/help-message.txt Please try keep these in sync. --> 
Usage:
  remarker [options] serve      Serves all the assets at localhost
  remarker [options] build      Builds all the assets to the dest

Options:
  -h, --help                    Shows the help message and exits
  -v, --version                 Shows the version number and exits
  -s, --source <path>           Specifies the slide's markdown file.
                                This overrides 'source' property of the config file.
  -o, --out <filename>          The output filename of the slides. Default is index.html.
  -d, --dest <path>             The destination directory for built slides.
  -p, --port <number>           The port number for dev server.
  -b, --open-browser            Open the browser to the page when server starts. Default is false.

Examples

Motivation of remarker

remark is a great presentation tool and you can write your slide's contents in markdown. The problem is when you simply use remark, you need to maintain the html, css and scripts as well as markdown. If you care the details of design and style of the slides, that's fine. However if you don't care the design of the slides that much and want to focus only on the contents, then the settings of css, html, scripts seem quite messy. remarker solves this problem. remarker separates the contents (= markdown) from the settings (css, html, scripts). So you can only focus on and keep maintaining the contents of the slides and let remarker do the rest of the work. This is easier than using remark directly.

How-tos

How to use images in slides

Put the images under ./assets directory and they are automatically served/copied and you can reference it like <img src="assets/my-diagram.png" width="600" /> in your slides.

The directory name of assets can be configured in remarker.yml. See the configuration section for details.

Who uses this tool?

See this search.

History

License

MIT