@infosupport/kc-serve

Create and serve reveal.js presentations with ease.

Inspired by reveal-md.

Usage

Global

npm i -g @infosupport/kc-serve
kc-serve --theme @infosupport/kc-cli-theme --highlight darkula

Local

npm i --save @infosupport/kc-serve

package.json:

  "scripts": {
    "start": "kc-serve --theme @infosupport/kc-cli-theme --highlight darkula"
  }

Library

TypeScript:

import serve from '@infosupport/kc-serve';

try {
    serve({
        cwd: process.cwd(), 
        title: 'title',
        theme: 'beige', // or a package
        highlight: 'darkula.css'
    }).listen(port)
    .then(url => console.log(url))
    .catch(err => console.error(err.message));
} catch (err) {
    console.error(err.message)
}

Special folders:

folder	description
./slides	slides (markdown, png, gif, jpg & svg)
./img	image files (from markdown: )
./css	custom css

Options:

The options are the same for the library as the command line except the first accepts a working directory and the latter default opens the presentation in the browser.

option	description
--theme	resolve to reveal.js theme
--highlight	resolve to highlight.js style
--port	serve from specified port
--no-open	don't open presentation in browser

• Pick a highlight style from demo or use the css file name from source

• Use a default reveal.js theme: black, white, league, beige, sky, night, serif, simple or solarized (see: reveal.js#theming) or use a package containing a custom theme (it should resolve to the css via 'main' or explicitly), or override (parts of) a theme with a custom css in the ./css folder

Tips:

• Order slides with a number prefix (leading zeros may be omitted)
• Group slides in subdirectories to create vertical slides, see: reveal.js/#markup
• Make image slides directly from 'png', jpg', 'gif' and 'svg'
• Inject custom css in the './css' folder
• Put images in the './img' folder and include from a markdown slide using ![alt-text](img/your-image.jpg)
• Style images from custom-css with a selector on the alt-text img[alt='alt-text'] or filename img[src='img/your-image.jpg']

Notes

Wrap your own CLI around the library to create a tool with a custom default theme and/or highlight style. Take a look at bin/cli.ts for inspiration.

The main differences with reveal-md are:

• The way subdirectories are treated. I want to break-up my presentation in small markdown files to make large presentations more maintainable and git-friendly.
• The way how custom themes are resolved. I didn't want to include a copy of my company theme in each and every presentation.
• Less configuration options.

Why not contribute to or fork reveal-md? When I tried to cut down the source I found it very entangled. It was a great start to find out what I needed but it was more easy to rebuild it from scratch.