Cheatslides

Markdown Presentation Ecosystem

Contents

  • MARP: about & features
  • VS Code integration
  • Slide file structure
  • Examples
  • Not covered topics
  • Reference links
Examples
  • Headers & Footers
  • Hyperlinks
  • Styles
  • Images
  • Miscellaneous

Source markdown file and slides are stored in this repo.

About

What's Marp?

Marp (Markdown Presentation Ecosystem) provides a great experience for writing presentations with Markdown.

from Marp Team Github

Features

  • Write in markdown, present in PDF, PPTX or HTML like this one.
    • Version control
    • Images files separate from slides
  • VS Code plugin for live editing & rendering experience.
  • CLI or VS Code to export desired format.
  • Extend as much as You want or just by writing some HTML.

VS Code integration

Just a copy of official instructions:

  1. Install Visual Studio Code.
  2. Install the Marp for VS Code extension.
  3. Create and open a new Markdown file (with .md extension).
  4. Select the Toggle Marp feature for current Markdown command from the Marp icon in editor actions (toolbar).
  5. Open VS Code Markdown preview, and start writing your presentation!

Slide file structure

Minimal slide deck definition (empty slide deck) starts with YAML front-matter and marp enabled:

---
marp: true
---

Slide file structure

Slide separation (ruler)

Default --- requires empty line before the ruler (according CommonMarks spec)
Other ruler options that work and not require empty lines:

  • ___
  • ***
  • - - -

Slide file structure

Global directives impact the whole slide deck and are also defined in front matter:

---
marp: true
theme: default
style: |
    /* multiline css definitions */
---

Slide file structure

Local directives can be used in front matter to influence all slides or in a specific slide as a HTML comment (impacts that slide and all subsequent slides).
In order to cheange only that exact slide use local directives prefixed with "_" (spot direcitve).

<!--
class: css_name (Specify HTML class of slide’s <section> element.)
backgroundImage: url('./img/custom_background.png')
-->

Slide syntax

HTML tags

  • HTML tags are disabled by default for security.
  • Allowed by default: <style> and <br />.
  • To enable HTML tags via VS Code togle markdown.marp.enableHtml option or go to extension settings:
Header text supports some markdown styling, images and hyperlinks

Examples

Headers & Footers

Header set for all subsequent slides or until changed:

<!-- 
header: "Header *text* supports some **markdown** styling, images and hyperlinks"
-->

Footer too:

<!-- 
footer: "Footer *text* supports some **markdown** styling, images and hyperlinks"
-->
Footer text also supports some markdown styling, images and hyperlinks
A different header.....

Headers & Footers

Header set only for this slide. Next slide will have the continuing header or no header if it was not present.

<!-- 
_header: "A different header....."
-->

Reverting to no header/footer:

<!-- 
header: ""
footer: ""
-->
Footer text also supports some markdown styling, images and hyperlinks

Pagination

Just like header and footer, page numbers are available as a local/spot directive:

<!-- 
paginate: true
-->
paginate page number increment comment
true Show
Yes
 Slide number incremented and shown
false Hide Yes Slide number incremented, but not shown
hold Show No Holds the same number for few slides
skip Hide No Unnumbered slide

Links support reference to:

Markdown and HTML syntax links work too.

Styles

Slide styles

Style of this slide is changed with spot directives and some CSS.

<!--
_backgroundColor: black
_color: white
-->

Other background directives:

Slide styles

Directive 'class' usage

More experienced with CSS can fully restructure the layout of a slide with the help of class directive. It points to CSS definitions inside style global directive or <style> tag.

With HTML tags enabled and using <div class="style_name"> it is fairly easy to create Your own layout for the slide as it was done in the previous slide with 2 columns.

Scoped CSS

Code block font size has been changed with a local style defintion that is valid only in this slide. Keyword scoped is mandatory. Otherwise all styles of all slides that have the tag are affected.

<style scoped>
pre {
   font-size: 2rem;
}
</style>
Modified header style
spanning muliple lines

Footer/header styles

Also can easily be modified with some CSS.

Now this is seen better

Text styles

A few options:

  • Markdown native features.
  • Slide (deck) level CSS changes.
<style scoped>
li {
  font-family: "Courier New"
}
</style>
  • Inline HTML and/or CSS features.
- Inline <b>HTML</b> and/or <span style="color:white; background-color: black">CSS</span> features.

Code block styles

  • Code block syntax highlighting (uses highlight.js)

All previous code snippets are highlited as HTML comments using ```html at the begining of the code block

A python highlighting example:

>>> l = [i for i in range(1,8)]
>>> l
[1, 2, 3, 4, 5, 6, 7]
>>> [a**2 for a in l if a%2 == 0]
[4, 16, 36]

Code block styles

Custom highlighting inside code blocks is a bit more cubersome, but then You can achieve exactly what You wanted to show with inline HTML tags.

>>> l = [i for i in range(1,8)]
>>> l
[1, 2, 3, 4, 5, 6, 7]
>>> [a**2 for a in l if a%2 == 0]
[4, 16, 36]

HTML code block definition:

<pre>
<code>[...]
[...]
[...]</code>
</pre>

Images

Background images

Keyword bg in alt-text of image.
Split the slide into 60% : 40% ratio.
Resized image to 90% of the allocated area.
Syntax: ![bg right:60% 90%](path-to-img)

Official slide background docs

Inline images

Original image in previous slide. Slide and text layout created with simple HTML and CSS. Images inserted with markdwon syntax.


Keyword invert


Keyword blur


Keyword sepia

HTML img tag

Marp logo Including and positioning the image can also be done this way: 
<img src="./img/marp_logo.png" alt="Marp logo" class="center-50">

As long as You are happy with results 🥳

Miscellaneous

Math formulas

When , there are two solutions to and they are

draw.io iframes

Presenter mode and comments

This slide has comments that are shown in presenter view.

Comments are put into HTML comment syntax:

<!-- 
HTML comments are shown in presenter view. 
-->

You can have multiple comments:

<!-- Comment one -->
<!-- Comment two -->

Not covered

  • Inline SVG
  • Using other (not built-in) themes
  • Developing themes
  • Transitions

Marp guides

Helping answers

All links are coverted to <a> tags so You can style them with CSS like this: a { key: value }

List defined with hyphen comes up at once. Defined with asterics is revealed step by step.

HTML comments are shown in presenter view.

Comment one

Comment two