Numeric Production Mechanism
    Wondering what’s next for npm?Check out our public roadmap! »

    infosupport-kc-serve-fork
    TypeScript icon, indicating that this package has built-in type declarations

    2.1.4 • Public • Published

    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',
            footer: './my-footer.html'
        }).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: ![alt-text](img/your-image.jpg))
    ./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
    --footer resolve to markup to be included in footer of every slide
    • 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.

    Install

    npm i infosupport-kc-serve-fork

    DownloadsWeekly Downloads

    1

    Version

    2.1.4

    License

    Apache-2.0

    Unpacked Size

    62.9 kB

    Total Files

    84

    Last publish

    Collaborators

    • avatar