Marp notes - Easy Presentations in Markdown

.editorconfig

# EditorConfig is awesome: https://EditorConfig.org

# top-most EditorConfig file
root = true

# Unix-style newlines with a newline ending every file
[*]
charset = utf-8
end_of_line = lf
indent_size = 4
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true

# Markdown
[*.{md,mdx,mkdn,markdown,rst}]
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = false

# YAML, HTML, etc.
[*.{js,jsm,ts,tsx,coffee,json,json5,y{a,}ml,htm,html,cwl}]
indent_size = 2
indent_style = space

# TOML
[*.toml]
indent_size = 2
indent_style = space

# justfiles
[{justfile,.justfile,.justfile.user}]
indent_size = 2
indent_style = space

# tab indentation (no size specified)
[Makefile]
indent_size = 4
tab_width = 4
indent_style = tab

# 4 space indentation
[*.py]
charset = utf-8
indent_size = 4
indent_style = space

# indentation override for all JS under lib directory
[lib/**.js]
indent_size = 2
indent_style = space

# matches the exact files either package.json or .travis.yml
[{package.json,.travis.yml}]
indent_size = 2
indent_style = space

# CSS
[*.{css,sass,scss,less,pcss,svg,styl}]
indent_size = 2
indent_style = space

.gitlab-ci.yml

stages:
  - build
  - deploy
generate-deck:
  stage: build
  image:
    name: marpteam/marp-cli
    entrypoint: [""]
  script :
    - mkdir build/
    - export MARP_USER="$(id -u):$(id -g)"
    - /home/marp/.cli/docker-entrypoint -I . -o build/
  artifacts:
    paths:
      - "build/"
pages:
  stage: deploy
  script:
    # Nothing to do, as we just need to publish the build/ dir
    - mv build public
  artifacts:
    paths:
      - public
  dependencies:
    - generate-deck

.gitpod.yml

tasks:
  - name: Add marp-cli container
    init: docker pull marpteam/marp-cli
  - name: Configure aliases
    command: |
      alias marp='docker run --rm --init -v $PWD:/home/marp/app/ -e LANG=$LANG -e MARP_USER="$(id -u):$(id -g)" marpteam/marp-cli'
vscode:
  extensions:
   # Fix version to be compatible with current Gitpod workspace
   - marp-team.marp-vscode@1.3.0

.marprc.yml

allowLocalFiles: true
options:
  looseYAML: false
  markdown:
    breaks: true # newlines in paragraphs are rendered as <br>
bespoke:
  progress: true
output: "./build/"
themeSet: "./themes"
theme: gaia

README.md

Make Presentations with Markdown

Getting Started

• https://marp.app/
• https://github.com/marp-team/marp

What is Markdown?

• https://marpit.marp.app/markdown
• https://commonmark.org/help/

Tools

• https://github.com/marp-team/marp-cli
• https://marketplace.visualstudio.com/items?itemName=marp-team.marp-vscode
• https://github.com/favourhong/Awesome-Marp
• https://github.com/cupcakearmy/markdown-it-import
• https://github.com/JichouP/obsidian-marp-plugin
• https://github.com/samuele-cozzi/obsidian-marp-slides

Examples

• https://raw.githubusercontent.com/yhatt/marp-cli-example/master/PITCHME.md
• https://github.com/yhatt/marp-cli-example

Assets and Themes

• The assets directory can put your assets for using in the deck. (e.g. Image resources)

• The themes directory can put custom theme CSS. To use in the deck, please change theme global directive.

• The built assets will output to the public directory.

• https://marpit.marp.app/theme-css

• https://github.com/marp-team/marp-core/tree/main/themes

Community Themes

• https://github.com/matsubara0507/marp-themes
• https://github.com/rainbowflesh/Rose-Pine-For-Marp
• https://github.com/dracula/marp
• https://github.com/cunhapaulo/marpstyle

Directives

• https://marpit.marp.app/directives

Images

• https://marpit.marp.app/image-syntax

Font Awesome

• https://fontawesome.com/

Mermaid.js

• https://mermaid-js.github.io/mermaid/#/
• https://marketplace.visualstudio.com/items?itemName=bierner.markdown-mermaid
• marp-team/marp-core#139

To use Mermaid diagrams in your Marp presentation, simply add the following script to your Markdown file:

<!-- Add this anywhere in your Markdown file -->
<script type="module">
  import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
  mermaid.initialize({ startOnLoad: true });
</script>

  svg[id^="mermaid-"] { 
    min-width: 480px; 
    max-width: 960px; 
    min-height: 360px; 
    max-height: 600px; 
  }

<div class="mermaid">
graph TD;
    A-->B;
    A-->C;
    B-->D;
    C-->D;
</div>

Loading

Automating Deployment

• https://github.com/marketplace/actions/marp-action
• https://github.com/yhatt/marp-cli-example/blob/master/.github/workflows/github-pages.yml
• https://github.com/KoharaKazuya/marp-cli-action
• https://github.com/ralexander-phi/marp-to-pages
• https://docs.gitlab.com/ee/user/project/pages/

Alternatives

• https://news.ycombinator.com/item?id=34501901
• https://obsidian.md/
• https://pandoc.org/
• https://revealjs.com/
• https://quarto.org/

devcontainer.json

// For format details, see https://aka.ms/devcontainer.json.
// For config options, see the README at: https://github.com/devcontainers/templates/tree/main/src/ubuntu
// For more images, see: https://containers.dev/templates
{
  "name": "Ubuntu",
	// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile
	"image": "mcr.microsoft.com/devcontainers/base:ubuntu",
	"features": {
		// uncomment this to allow pptx or pdf export
		//"ghcr.io/rocker-org/devcontainer-features/apt-packages:1": {
		//   "packages": "chromium"
		// }
	},

  //"build": {
    // Path is relative to the devcontainer.json file.
    //"dockerfile": "Dockerfile"
  //}

	// Features to add to the dev container. More info: https://containers.dev/features.
	// "features": {},

	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	// "postCreateCommand": "uname -a",
	"postStartCommand": "git config --global --add safe.directory ${containerWorkspaceFolder}",
	
	// Configure tool-specific properties.
	"customizations": {
		"vscode": {
			"settings": {
				"markdown.marp.enableHtml" : true,
				"markdown.marp.themes": [
					"./slides/themes/custom.css",
					"./slides/themes/custom-default.css",
					"./slides/themes/custom-gaia.css",
					"./slides/themes/custom-uncover.css"
				  ]
			},
			"extensions": [
				"yzhang.markdown-all-in-one",
				"marp-team.marp-vscode",
				"bierner.markdown-mermaid"
			]
		}
	}
	// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
	//"remoteUser": "root"
}

docker-compose.yml

version: "3"

services:
  generate:
    image: docker.io/marpteam/marp-cli
    volumes:
      - ./:/home/marp/app
    environment:
      - LANG=en_US.UTF-8
      - MARP_USER=""
    command: --input-dir ./slides

  serve:
    image: docker.io/marpteam/marp-cli
    volumes:
      - ./:/home/marp/app
    environment:
      - LANG=en_US.UTF-8
      - MARP_USER=""
    ports:
      - 8080:8080
      - 37717:37717
    command: --watch --server ./slides

Dockerfile

FROM mcr.microsoft.com/devcontainers/base:ubuntu

# Install the xz-utils package
RUN apt-get update && apt-get install -y xz-utils

justfile

#!/usr/bin/env just --justfile                                                                                                                                                                                                                
# vim:set ft=just ts=2 sts=4 sw=2 et:

# https://github.com/casey/just#settings

#set allow-duplicate-recipes                                                                                  
#set dotenv-load                                                                                              
#set export                                                                                                   
#set positional-arguments                                                                                     
#set shell := ["bash", "-c"]                                                                                  
#set windows-powershell

# colors                                                                                            
#green = "\\033[0;32m"                                                                                        
#cyan = "\\033[0;36m"                                                                                         
#clear = "\\033[0m" 

# lists the tasks, ensure this is task one in the list                                                        
@_list:                                                                                                       
  @just --list --justfile {{justfile()}}

# this is a comment
#default:                                                                                                     
#  @just --summary                                                                                            
                                                                                                              
help:                                                                                                         
  @just --list                                                                                                                                                                                                                                         
                                                                                                 
# This is just a test that echoes hello, world!                                                                      
#@hello:                                                                                                      
#  echo "hello, world!"

#script:                                                                                                      
#  ./{{justfile_directory()}}/scripts/some_script

markdown-cheatsheed.md

Markdown Cheat Sheet

This Markdown cheat sheet provides a quick overview of all the Markdown syntax elements.

Basic Syntax

These are the elements outlined in John Gruber’s original design document. All Markdown applications support these elements.

Heading

H1

H2

H3

Bold

bold text

Italic

italicized text

Blockquote

blockquote

Ordered List

1. First item
2. Second item
3. Third item

Unordered List

• First item
• Second item
• Third item

Code

code

Horizontal Rule

---

Link

Markdown Guide

Image

Extended Syntax

These elements extend the basic syntax by adding additional features. Not all Markdown applications support these elements.

Table

Syntax	Description
Header	Title
Paragraph	Text

Fenced Code Block

{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}

Footnote

Here's a sentence with a footnote. ¹

Heading ID

My Great Heading {#custom-id}

Definition List

term : definition

Strikethrough

The world is flat.

Task List

• Write the press release
• Update the website
• Contact the media

Emoji

That is so funny! 😂

Highlight

I need to highlight these ==very important words==.

Subscript

H2O

Superscript

X^2^

Footnotes

1. This is the footnote. ↩

marp.sh

#!/bin/bash

_docker_cmd="${DOCKER_CMD:-docker}"

function mkvenv() {
  local _venv
  _venv="${1}"
  test ! -d ~/.venvs && mkdir -p "${HOME}/.venvs"
  
  printf "creating virtualenv ${_venv} in ~/.venvs.. \n"
  python3 -m venv "${HOME}/.venvs/${_venv}"
  source "${HOME}/.venvs/${_venv}/bin/activate"
  #python -m pip install <package>
}

function podman-marp() { 
  "${_docker_cmd}" run --rm -v "$(pwd)":/home/marp/app/ -e LANG=$LANG marpteam/marp-cli "${*}"
}

# Start the slides server in watch mode
function marp-watch() {
  npx @marp-team/marp-cli@latest -w slides.md
}

# generate a pdf
function marp2pdf() {
  npx @marp-team/marp-cli@latest slides.md -o slides.pdf
}

# generate a pptx
function marp2pptx() {
  npx @marp-team/marp-cli@latest slides.md -o slides.pptx
}

setting.json

{
    // ...
    "markdown.marp.themes": [
      "https://raw.githubusercontent.com/rainbowflesh/Marp/master/css/rosepine-dawn.css",
      "https://raw.githubusercontent.com/rainbowflesh/Marp/master/css/rosepine-moon.css",
      "https://raw.githubusercontent.com/rainbowflesh/Marp/master/css/rosepine.css",
    // if raw.githubusercontent.com not work, try use this
      "https://rainbowflesh.github.io/css/rose-pine-dawn.css",
      "https://rainbowflesh.github.io/css/rose-pine-moon.css",
      "https://rainbowflesh.github.io/css/rose-pine.css",
    ]
    // ...
}

slides.md

marp	title	description	keywords	theme	size	_class	paginate	_paginate	backgroundColor	backgroundImage	style
true	Slide Title	Slide description	Marp, Slides	gaia	14580	lead	true	false		url('https://marp.app/assets/hero-background.svg')	table { width: 100%; margin: 0 auto; margin-top: 1em; font-size: 0.75em; } h1 { font-size: 1.5em; } h2 { font-size: 1em; } p { font-size: 0.75em; }

Presentation Title

by Adam Kaminski

• GitHub
• Blog

---

Agenda

• What is Marp?
• Content slide
• What cool features does it have?
• Conclusion

---

What is Marp?

The Marp Presentation Ecosystem (Marp for short) is a collection of tools that allow you to create elegant slide decks using the familiar Markdown syntax

---

Content slide

• Markdown is great
• Focus on cool stuff and demos and not fighting with PowerPoint
• Use Git, commit and version control

---

List Slide

• Item 1
• Item 2
• Item 3

---

Image Slide

---

Quote Slide

Split pages by horizontal ruler (---). It's so simple! 😆

---

Table Slide

Column 1	Column 2
Item 1	Item 2
Item 3	Item 4

---

Footer Slide

1. Numbered Item 1
2. Numbered Item 2

---