With Presentador
, you describe the content of each of your slides using Markdown and it will produce a beautiful presentation ready to be hosted anywhere you want. Don't worry about how they're going to look, just focus on your presentation.
There is only a single layout depending on the elements of your slide. Presentador
parses the elements in each slide and assigns a certain pre-defined layout to it.
See it in action. Presentadors' website is a presentation itself. π
Create a folder to put your slides. Create one file for each slide and give them a number which will be the order of that slide, e.g 1.md
, 2.md
...
Write common Markdown in each slide, add your headers, paragraphs, images, etc. See some examples in the fixtures/ folder.
Then run:
npx presentador develop -d FOLDER
A local server will start in development mode where you can start writing your presentation and changes will reflect immidiately in your browser.
When you're done, run:
npx presentador build -d FOLDER
And that will produce a static site with your presentation ready to be hosted anywhere.
npm install presentador
or
yarn add presentador
Then add it to your package.json
s' scripts
section:
"scripts": {
"build": "presentador build -d slides/",
"develop": "presentador develop -d slides/",
"serve": "presentador serve -d slides/"
}
There are three commands currently:
> build
To build your presentation and output the final artifacts that you can host anywhere you want.
> serve
To serve your presentation from your own machine.
> develop
To develop locally your presentation.
In all cases above, you need to pass a directory with a list of Markdown files.
> presentador build -d slides/
We could use all the help we can get. So please feel free to go through our open issues or create one if thought of a new cool feature or found a bug.
Running Presentador
will be as easy as forking and cloning this repo, then running:
> yarn
> yarn dev
The local dev server will run against the website folder which contains Presentadors' website. You can also the fixtures folder for more examples and testing.
To run the playground:
> yarn playground
The process of compiling a presentation is actually quite simple. For each Markdown file you supply, Presentador
will parse it and make a list of some specific elements.
If then that list matches one of the below, it will pass them to the appropriate renderer and the renderer will decide how to lay them out and render them. If it doesn't matches any, the normal renderer will kick in.
List | State Name | Renderer |
---|---|---|
Header | singleHeader | singleHeader |
Header,Header | twoHeaders | twoHeaders |
Header,Paragraph | headerParagraph | headerParagraph |
Header,Paragraph,Image | headerParagraphImage | headerParagraphImage |
Header,Paragraph,Paragraph,... | headerManyParagraphs | headerManyParagraphs |
Header,Paragraph,Paragraph,...,Image | headerManyParagraphsImage | headerManyParagraphsImage |
Header,List | headerList | headerList |
Header,Image | headerImage | headerImage |
Blockquote | blockquote | blockquote |
Image | image | image |
Image,Image,... | manyImages | manyImages |
Header,Codeblock | headerCodeblock | headerCodeblock |