md2impress

0.2.0 • Public • Published

md2impress Build Status

📝 generate web presentations from markdown!

Web App Demo

Installation

md2impress requires Node v8.3.0+ and npm. Download Node + npm here.

Run these commands to install the package and its dependencies

cd path/to/directory
$ npm install --save md2impress

or clone this repo using this command git clone git@github.com:louisjordan/md2impress.git

Developers

To run the web application locally, first clone the repository then navigate to the app directory. Next, install the dependencies and finally run npm start.

$ git clone git@github.com:louisjordan/md2impress.git
cd app
$ npm install
$ npm start

Usage

md2impress works in the browser and in Node and has a CLI interface

CLI

$ npm install --global md2impress
$ md2impress --input <file|dir> --output <dir> [options]
 
Options:
 
    -v, --version          output the version number
    -i, --input [input]    Markdown input directory or file path (default: current directory)
    -o, --output [output]  HTML output directory (default: input directory)
    -l, --layout [layout]  Presentation layout (default: 'manual')
    -s, --style [style]    Presentation style (default: 'basic')
    -t, --title [title]    Presentation title (default: input filename)
    -h, --help             output usage information
 
e.g:
 
$ md2impress -i ~/Documents/presentations -l spiral -s deep-purple

Node

$ npm install --save md2impress
const md2impress = require('md2impress');
 
const markdown = `
# Example Slide
Welcome to my *example* slide
------
# Slide 2
This is the second slide
`;
 
const html = md2impress(markdown, { layout: 'horizontal', style: 'basic', title: 'My Presentation' });

NOTE: if using md2impress in a bundled application, it is recommended to build the file separately by cloning the repository and running npm run build then importing it using a script tag as shown below.

Browser

<!doctype html>
<html>
  <body>
    <script src="path/to/md2impress.min.js"></script> 
    <script>
      const markdown = `
# Example Slide
Welcome to my *example* slide
------
# Slide 2
This is the second slide
`;
 
      const html = window.md2impress(markdown, { layout: 'horizontal', style: 'basic', title: 'My Presentation' });
    </script> 
  </body>
</html>

Features

Layouts

Layouts apply step coordinate attributes including x & y positions, rotation and scaling allowing for consistent presentation transitions.

In the CLI you can specify the layout using the -l [layout] (default is manual) flag e.g:

$ md2impress -i input/path -o output/path -l horizontal

Via the API you specify the layout in the options object e.g:

const html = md2impress(markdown, { layout: 'horizontal' });

Alternatively, you can specify your own attributes using the 'manual' layout mode. md2impress will read attributes for each slide like this:

<!-- x:100 y:200 rotation:90 -->
 
Hello World!
 
======
 
<!-- x: 1000 y:500 rotation:0 scale:2 -->
 
## Example slide

Supported layouts:

Layout Name Description
manual Reads from each step's attributes comment
horizontal Display each step one after the other horizontally
vertical Display each step one after the other vertically
spiral Display steps as an Archimedean Spiral

Styles

Styles apply CSS to your presentations allowing for consistent presentation designs with zero effort.

In the CLI you can specify the style using the -s [style] flag (default is basic) e.g:

$ md2impress -i input/path -o output/path -s minimalist

Via the API you specify the style in the options object e.g:

const html = md2impress(markdown, { style: 'minimalist' });

Supported styles:

Name Description
basic Simple design, nothing too fancy
impress-demo Impress.js demo presentation style
simple-blue
deep-purple
retro

Custom layouts and style

To create a custom layout or style, first clone this repository then:

Style

  • add the CSS file to ./src/styles/

Layout

  • add a JS file to ./src/layouts/ that exports a map iteration function (NOTE: see examples in ./src/layouts/)

then...

  • add the layout/style name to ./src/supported.json (NOTE: name must be the same as filename e.g. ./src/style/basic.css = 'basic')
  • run npm run build

Custom Styles

It is recommended to import the _defaults.css file to your custom stylesheets as a base to work from:

@import '_defaults.css';
 
.step {
  ...;
}

Package Sidebar

Install

npm i md2impress

Weekly Downloads

0

Version

0.2.0

License

MIT

Unpacked Size

266 kB

Total Files

32

Last publish

Collaborators

  • louisjordan