📝 generate web presentations from markdown!
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
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 startmd2impress 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-purpleNode
$ npm install --save md2impressconst 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>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 = 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 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 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 = 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 |
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
It is recommended to import the _defaults.css file to your custom stylesheets as a base to work from:
@import '_defaults.css';
.step {
...;
}