md2impress 
📝 generate web presentations from markdown!
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 md2impressor 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 startUsage
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 -o, --output [output] HTML output directory -l, --layout [layout] Presentation layout -s, --style [style] Presentation style -t, --title [title] Presentation title -h, --help output usage information e.g: $ md2impress -i ~/Documents/presentations -l spiral -s deep-purpleNode
$ npm install --save md2impressconst md2impress = ; const markdown = `# Example SlideWelcome to my *example* slide------# Slide 2This is the second slide`; const html = ;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
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 horizontalVia the API you specify the layout in the options object e.g:
const html = ;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 slideSupported 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 minimalistVia the API you specify the style in the options object e.g:
const html = ;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 amapiteration 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:
;