Awesome
Marp CLI example
The good starter example for using Marp via Marp CLI.
- Write your slide deck by Marp Markdown.
- Manage the content of slides via Git. (Using GitPitch style
PITCHME.md) - Host your deck at GitHub, and publish as webpage with GitHub Pages, Netlify, and Vercel.
- Blazingly fast delivery out of the box. Acquired all 100% Lighthouse scores!
See published slide deck
- <img src="https://icongr.am/octicons/mark-github.svg" width="24" height="24" valign="bottom" /> GitHub Pages: https://yhatt.github.io/marp-cli-example
- <img src="https://icongr.am/simple/netlify.svg?colored" width="24" height="24" valign="bottom" /> Netlify: https://yhatt-marp-cli-example.netlify.app/
- <img src="https://icongr.am/simple/zeit.svg" width="24" height="24" valign="bottom" /> Vercel: https://marp-cli-example.yhatt.vercel.app/
Lighthouse
<p align="center"> <img src="https://user-images.githubusercontent.com/3993388/115988866-7cd7fe00-a5f6-11eb-9e51-7a62da998eca.png" width="615" alt="Acquired all 100% Lighthouse scores" /> </p>Usage
It's surprisingly easy to start publishing your slide deck!
<img src="https://icongr.am/octicons/mark-github.svg" width="24" height="24" valign="bottom" /> GitHub Pages
Create a new public repository based on this repository, from "Use this template" button!
We already have GitHub Actions workflow to build and deploy automatically when merged to master branch. It's also available to deploy from any branch manually.
To get started, turn on GitHub Pages in repository's "Settings tab → Pages" by setting source as "GitHub Actions".
<img src="https://icongr.am/simple/netlify.svg?colored" width="24" height="24" valign="bottom" /> Netlify
Push "Deploy to netlify" button. Netlify will create your repository based on this example and host website from master branch automatically.
<img src="https://icongr.am/simple/zeit.svg" width="24" height="24" valign="bottom" /> Vercel
Push "Deploy" button. Vercel can choose to create your repository based on this example.
:information_source: To enable the auto-generated open graph image in Vercel, you have to turn on "Automatically expose System Environment Variables" in your Vercel project dashboard.
How to write
For Marp slide deck features, please see the documentation of Marpit Markdown, the features of Marp Core, and the default example in PITCHME.md for .
You have to install Node.js and run npm i at first if you want to write slide deck with Marp CLI.
Edit deck
Just edit PITCHME.md!
Preview deck
Marp for VS Code extension is the best partner for writing Marp slide deck with live preview.
<p align="center"> <a href="https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode"> <img src="https://raw.githubusercontent.com/marp-team/marp-vscode/master/docs/screenshot.png" width="500" /> </a> </p>You can try edit and preview on the web now! Open https://github.dev/yhatt/marp-cli-example/blob/master/PITCHME.md or hit <kbd>.</kbd> key on this repository, and install Marp for VS Code extension.
Preview via CLI
npm run start
It will be opened preview window via installed Google Chrome, and track change of PITCHME.md.
Assets and themes
assetsdirectory can put your assets for using in the deck. (e.g. Image resources)themesdirectory can put custom theme CSS. To use in the deck, please changethemeglobal directive.
Build deck via CLI
npm run build
The built assets will output to public folder.
Build per assets
npm run deck # Output static HTML to public/index.html
npm run og-image # Output image for Open Graph to public/og-image.jpg