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.
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.
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.
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]
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
port
is the port number of remarker server. Default is 6275
.dest
is the destination of remarker build
command. Default is build
out
is the filename of the result html page. Default is index.html
source
is the source markdown filename. Default is slides.md
.title
is the page title of the slides. Default is an empty string.css
is css text you want to add to slides' html page.cssFiles
is the list of additional stylesheet files (URL or the file pathassets
is the list of assets directory. These directories are copied/servedscriptFiles
is the list of additional JavaScript files (URL or the file pathscript
is additional JavaScript code appended after the remark.js andscriptFiles
. Default is an empty string.remarkConfig
is the config object which is passed to remark.create(options).remarkPath
is the path to remark.js. This replaces the original remark.jsscriptFilesAfterCreate
is the list of additional JavaScript files (URL orremark.create()
. If you provide file paths, these files are copied/servedlivereload
is the flag to toggle livereloading feature. Default is true.livereloadPort
is the port number for livereloading websocket connection.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.
remark
slides in remarker
configuration.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.
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.
See this search.
-b, --open-browser
option.--dest
, --out
, and --port
CLI options.cssFiles
optionMIT