Marp Basic Example

Marp is the ecosystem to write your presentation with plain Markdown. https://marp.app/

Updated at 2019-09-16: Renew contents to match to Marp Next instead of the outdated Marp desktop app.
https://gist.github.com/yhatt/a7d33a306a87ff634df7bb96aab058b5

Transcript

1. Marp Markdown presentation ecosystem by Marp Team (@marp-team)
2. Features Write slide deck with plain Markdown (CommonMark) Built on Marpit framework: A brand-new skinny framework for creating slide deck Marp Core: Easy to start using the core engine and built-in themes via npm Marp CLI: Convert Markdown into HTML, PDF, PPTX, and images Marp for VS Code: Live-preview your deck while editting and more...
3. How to write slides? Split pages by horizontal ruler (e.g. --- ). It's very simple. # Slide 1 foobar --- # Slide 2 foobar
4. Directives Marp has extended syntax called "Directives" to support creating beautiful slides. Insert front-matter to the top of Markdown: --- theme: default --- or HTML comment to anywhere: <!-- theme: default --> https://marpit.marp.app/directives
5. Global directives theme : Choose theme size : Choose slide size from 16:9 and 4:3 (except Marpit framework) headingDivider : Instruct to divide slide pages at before of specified heading levels --- theme: gaia size: 4:3 --- # Content Marp can use built-in themes in Marp Core: default , gaia , and uncover .
6. Local directives These are the setting value per slide pages. paginate : Show pagination by set true header : Specify the contents for header footer : Specify the contents for footer class : Set HTML class for current slide color : Set text color backgroundColor : Set background color
7. Spot directives Local directives would apply to defined page and following pages. They can apply to single page by using underscore prefix such as _class .
8. Example This page is using invert color scheme defined in Marp built-in theme. <!-- _class: invert -->
9. Image syntax You can resize image size and apply filters through keywords: width ( w ), height ( h ), and filter CSS keywords.   Please refer resizing image syntax and a list of CSS filters.
10. Background image You can set background image for a slide by using bg keyword. 
11. Multiple backgrounds (Marpit's advanced backgrounds) Marp can use multiple background images.    Also can change alignment direction by including vertical keyword.
12. Split background Marp can use Deckset style split background(s). Make a space for background by bg + left / right keywords.  Photo by Mohamed Nohassi on Unsplash
13. Fragmented list Marp will parse a list with asterisk marker as the fragmented list for appearing contents one by one. (Only for exported HTML by Marp CLI / Marp for VS Code) # Bullet list - One - Two - Three --- # Fragmented list * One * Two * Three
14. Math typesetting (only for Marp Core) KaTeX math typesetting such as can use with Pandoc's math syntax. I = xx y f(x, y) ⋅ ∫ ∫ R 2 dydx $ax^2+bc+c$ $$I_{xx}=\int\int_Ry^2f(x,y)\cdot{}dydx$$ ax + 2 bc + c
15. Auto-scaling (only for Marp Core) Several built-in themes are supported auto-scaling for code blocks and math typesettings. Too long code block will be scaled-down automatically. ------------> Too long code block will be scaled-down automatically. ------------------------> Too long code block will be scaled-down automatically. ------------------------------------------------>
16. Auto-fitting header (only for Marp Core) is available by annotating <!--fit--> in headings. ## <!--fit--> Auto-fitting header (only for Marp Core)
17. Theme CSS Marp uses <section> as the container of each slide. And others are same as styling for plain Markdown. The customized theme can use in Marp CLI and Marp for VS Code. /* @theme your-theme */ @import 'default'; section { /* Specify slide size */ width: 960px; height: 720px; } h1 { font-size: 30px; color: #c33; }
18. Tweak style in Markdown <style> tag in Markdown will work in the context of theme CSS. --- theme: default --- <style> section { background: yellow; } </style> Re-painted yellow background, ha-ha. You can also add custom styling by class like section.custom-class { ... } . Apply style through <!-- _class: custom-class --> .
19. Scoped style If you want one-shot styling for current page, you can use <style scoped> . <style scoped> a { color: green; } </style> 
20. Enjoy writing slides! Marp: Markdown presentation ecosystem — https://marp.app/ by Marp Team (@marp-team)