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 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 -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-purple
Node
$ npm install --save md2impress
const 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 horizontal
Via 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 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 = ;
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 amap
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:
;