Marp(Marpit)
Marp(Marpit)を使って、Markdownからスライドを作成します。
準備
VS Codeと拡張機能を使用します。
Marp for VS Code
.mdファイルを作成し、左のプレビューアイコンを押します
ディレクティブ
ディレクティブの種類
| 名前 | 説明 |
|---|---|
| marp | trueを指定した場合は、marpが有効化 |
| theme | テーマの指定 |
| paginate | trueを指定した場合は、スライドにページ番号を表示 |
| header | ヘッダーの内容を指定 |
| footer | フッターの内容を指定 |
| class | スライドの<section>要素のHTMLクラスを指定 |
| backgroundColor | background-colorのスタイル |
| backgroundImage | background-imageのスタイル |
| backgroundPosition | background-positionのスタイル |
| backgroundRepeat | background-repeatのスタイル |
| backgroundSize | background-sizeのスタイル |
| color | colorのスタイル |
ページ番号
trueを設定するとスライドの下部にページ番号を表示します
md
ページ番号有効
<!-- paginate: true -->
ページ番号無効
<!-- paginate: false -->
ヘッダー
スライドの上部に文字列を表示します
md
<!-- header: 文字列 -->
フッター
スライドの下部に文字列を表示します
md
<!-- footer: 文字列 -->
同時指定
md
単一指定
<!-- ディレクティブ1の名前: 値 -->
複数指定
<!--
ディレクティブ1の名前: 値
ディレクティブ2の名前: 値
-->
有効範囲
全スライドに適用
md
---
marp: true
theme: gaia
header: "Qiita"
footer: "スライド"
---
一部のスライドに適用
<!-- xxx --> の形式で、各スライドの頭に設定を記述
| _を頭に | 効果範囲 |
|---|---|
| つける場合 | 「対象のスライドのみ」に設定を適用 |
| つけない場合 | 「そのスライド以降の全て」に設定を適用 |
md
---
marp: true
theme: uncover
---
<!--
_backgroundColor: lavender
_color: darkslategray
-->
# スライドのタイトル
---
<!--
_backgroundColor: whitesmoke
paginate: true
-->
# スライド 1
2 ページ目以降にページ数を表示
---
<!--
_backgroundColor: white
-->
# スライド 2
テスト
記法
ページ区切り
ページを区切る位置を指定する
md
---
見出しでページを区切る設定
既存Markdownを有効活用したい時などに使います。
md
#で区切る
<!--
headingDivider: 1
-->
##で区切る
<!--
headingDivider: 2
-->
###で区切る
<!--
headingDivider: 3
-->
テキスト
見出し
md
# 見出し1
## 見出し2
### 見出し3
#### 見出し4
##### 見出し5
###### 見出し6
太字/斜体
md
太字+斜体
***text***
___text___
太字
**text**
__text__
斜体
*text*
_text_
通常
text
箇条書き
箇条書き(順序なし)
md
- サンプル
- サンプル
- サンプル
md
* サンプル
* サンプル
* サンプル
箇条書き(順序付き)
md
1. サンプル
2. サンプル
3. サンプル
md
1) サンプル
2) サンプル
3) サンプル
数式
KaTeX形式で数式を記載可能です。
| 記号 | 内容 |
|---|---|
| $ | インライン表示 |
| $$ | ブロック表示 |
md
$$f(x) = \frac{1}{\sqrt{2\pi\sigma^2}}\exp{-\frac{(x-\mu)^2}{2\sigma^2}}
画像
画像の種類
| 特徴 | インライン画像 | 背景画像 |
|---|---|---|
| キーワードによるサイズ変更 | auto のみ | ○ |
| %によるサイズ変更 | ☓ | ○ |
| 長さによるサイズ変更 | ○ | ○ |
| 画像フィルター | ○ | ○ |
| 複数の背景 | - | ○ |
| 背景を分割する | - | ○ |
| テキストの色を設定する | ○ | - |
| 背景色の設定 | - | ○ |
インライン画像
背景画像と異なり、パーセンテージによる拡大/縮小はできません
md
画像を挿入
幅200pxで表示
高さ300pxで表示
幅200px、高さ30cmで表示
短縮記法
背景画像
背景画像の挿入
md
背景画像を挿入
背景画像の大きさをスライドサイズの比率で指定する
背景サイズ
md
| キーワード | 内容 | 指定方法 |
|---|---|---|
| cover | スライド全体に画像を拡大縮小(デフォルト) |  |
| contain | スライドに合わせて画像を拡大縮小 |  |
| fit | containの別名(decksetとの互換) |  |
| auto | 画像を拡大縮小しない |  |
| x% | 倍率をパーセンテージ値で指定 |  |
width(w)、height(h)でもサイズを指定可能です
複数の背景
横並び
デフォルトで横に並びます。
md
縦並び
vertical方向キーワードを使用すると、配置方向を縦に変更できます
md
背景の分割
割合を指定しないと、スライドサイズの半分で分割します
スライドコンテンツのスペースも縮小されます
md
右(割合未指定なので50%)
左(割合未指定なので50%)
左33%
背景色
md
色名指定
背景画像+背景色
画像フィルター
インライン画像、背景画像両方に適用可能
md
インライン画像の明るさを8割に落とし、セピア50%にする
背景画像の明るさを6割に落とす
| フィルター名 | 指定方法 |
|---|---|
| ぼかし | ![blur:10px]() |
| 明るさ | ![brightness:1.5]() |
| コントラスト | ![contrast:200%]() |
| ドロップシャドウ | ![drop-shadow:0,5px,10px,rgba(0,0,0,.4)]() |
| グレースケール | ![grayscale:1]() |
| 色相回転 | ![hue-rotate:180deg]() |
| 反転 | ![invert:100%]() |
| 透明度 | ![opacity:.5]() |
| サチュレーション | ![saturate:2.0]() |
| セピア | ![sepia:1.0]() |
上の指定はデフォルト値です
値の省略時はデフォルト値が適用されます
絵文字
People
md
:smile:
:laughing:
:blush:
:smiley:
:relaxed:
:smirk:
:heart_eyes:
:kissing_heart:
:kissing_closed_eyes:
:flushed:
:relieved:
:satisfied:
:grin:
:wink:
:stuck_out_tongue_winking_eye:
:stuck_out_tongue_closed_eyes:
:grinning:
:kissing:
:kissing_smiling_eyes:
:stuck_out_tongue:
:sleeping:
:worried:
:frowning:
:anguished:
:open_mouth:
:grimacing:
:confused:
:hushed:
:expressionless:
:unamused:
:sweat_smile:
:sweat:
:disappointed_relieved:
:weary:
:pensive:
:disappointed:
:confounded:
:fearful:
:cold_sweat:
:persevere:
:cry:
:sob:
:joy:
:astonished:
:scream:
:tired_face:
:angry:
:rage:
:triumph:
:sleepy:
:yum:
:mask:
:sunglasses:
:dizzy_face:
:imp:
:smiling_imp:
:neutral_face:
:no_mouth:
:innocent:
:alien:
:yellow_heart:
:blue_heart:
:purple_heart:
:heart:
:green_heart:
:broken_heart:
:heartbeat:
:heartpulse:
:two_hearts:
:revolving_hearts:
:cupid:
:sparkling_heart:
:sparkles:
:star:
:star2:
:dizzy:
:boom:
:collision:
:anger:
:exclamation:
:question:
:grey_exclamation:
:grey_question:
:zzz:
:dash:
:sweat_drops:
:notes:
:musical_note:
:fire:
:hankey:
:poop:
:shit:
:+1:
:thumbsup:
:-1:
:thumbsdown:
:ok_hand:
:punch:
:facepunch:
:fist:
:v:
:wave:
:hand:
:raised_hand:
:open_hands:
:point_up:
:point_down:
:point_left:
:point_right:
:raised_hands:
:pray:
:point_up_2:
:clap:
:muscle:
:metal:
:fu:
:runner:
:running:
:couple:
:family:
:two_men_holding_hands:
:two_women_holding_hands:
:dancer:
:dancers:
:ok_woman:
:no_good:
:information_desk_person:
:raising_hand:
:bride_with_veil:
:bow:
:couplekiss:
:couple_with_heart:
:massage:
:haircut:
:nail_care:
:boy:
:girl:
:woman:
:man:
:baby:
:older_woman:
:older_man:
:man_with_gua_pi_mao:
:man_with_turban:
:construction_worker:
:cop:
:angel:
:princess:
:smiley_cat:
:smile_cat:
:heart_eyes_cat:
:kissing_cat:
:smirk_cat:
:scream_cat:
:crying_cat_face:
:joy_cat:
:pouting_cat:
:japanese_ogre:
:japanese_goblin:
:see_no_evil:
:hear_no_evil:
:speak_no_evil:
:guardsman:
:skull:
:feet:
:lips:
:kiss:
:droplet:
:ear:
:eyes:
:nose:
:tongue:
:love_letter:
:bust_in_silhouette:
:busts_in_silhouette:
:speech_balloon:
:thought_balloon:
Nature
md
:sunny:
:umbrella:
:cloud:
:snowflake:
:snowman:
:zap:
:cyclone:
:foggy:
:ocean:
:cat:
:dog:
:mouse:
:hamster:
:rabbit:
:wolf:
:frog:
:tiger:
:koala:
:bear:
:pig:
:pig_nose:
:cow:
:boar:
:monkey_face:
:monkey:
:horse:
:racehorse:
:camel:
:sheep:
:elephant:
:panda_face:
:snake:
:bird:
:baby_chick:
:hatched_chick:
:hatching_chick:
:chicken:
:penguin:
:turtle:
:bug:
:honeybee:
:ant:
:beetle:
:snail:
:octopus:
:tropical_fish:
:fish:
:whale:
:whale2:
:dolphin:
:cow2:
:ram:
:rat:
:water_buffalo:
:tiger2:
:rabbit2:
:dragon:
:goat:
:rooster:
:dog2:
:pig2:
:mouse2:
:ox:
:dragon_face:
:blowfish:
:crocodile:
:dromedary_camel:
:leopard:
:cat2:
:poodle:
:paw_prints:
:bouquet:
:cherry_blossom:
:tulip:
:four_leaf_clover:
:rose:
:sunflower:
:hibiscus:
:maple_leaf:
:leaves:
:fallen_leaf:
:herb:
:mushroom:
:cactus:
:palm_tree:
:evergreen_tree:
:deciduous_tree:
:chestnut:
:seedling:
:blossom:
:ear_of_rice:
:shell:
:globe_with_meridians:
:sun_with_face:
:full_moon_with_face:
:new_moon_with_face:
:new_moon:
:waxing_crescent_moon:
:first_quarter_moon:
:waxing_gibbous_moon:
:full_moon:
:waning_gibbous_moon:
:last_quarter_moon:
:waning_crescent_moon:
:last_quarter_moon_with_face:
:first_quarter_moon_with_face:
:crescent_moon:
:earth_africa:
:earth_americas:
:earth_asia:
:volcano:
:milky_way:
:partly_sunny:
Objects
md
:bamboo:
:gift_heart:
:dolls:
:school_satchel:
:mortar_board:
:flags:
:fireworks:
:sparkler:
:wind_chime:
:rice_scene:
:jack_o_lantern:
:ghost:
:santa:
:christmas_tree:
:gift:
:bell:
:no_bell:
:tanabata_tree:
:tada:
:confetti_ball:
:balloon:
:crystal_ball:
:cd:
:dvd:
:floppy_disk:
:camera:
:video_camera:
:movie_camera:
:computer:
:tv:
:iphone:
:phone:
:telephone:
:telephone_receiver:
:pager:
:fax:
:minidisc:
:vhs:
:sound:
:speaker:
:mute:
:loudspeaker:
:mega:
:hourglass:
:hourglass_flowing_sand:
:alarm_clock:
:watch:
:radio:
:satellite:
:loop:
:mag:
:mag_right:
:unlock:
:lock:
:lock_with_ink_pen:
:closed_lock_with_key:
:key:
:bulb:
:flashlight:
:high_brightness:
:low_brightness:
:electric_plug:
:battery:
:calling:
:email:
:mailbox:
:postbox:
:bath:
:bathtub:
:shower:
:toilet:
:wrench:
:nut_and_bolt:
:hammer:
:seat:
:moneybag:
:yen:
:dollar:
:pound:
:euro:
:credit_card:
:money_with_wings:
:e-mail:
:inbox_tray:
:outbox_tray:
:envelope:
:incoming_envelope:
:postal_horn:
:mailbox_closed:
:mailbox_with_mail:
:mailbox_with_no_mail:
:package:
:door:
:smoking:
:bomb:
:gun:
:hocho:
:pill:
:syringe:
:page_facing_up:
:page_with_curl:
:bookmark_tabs:
:bar_chart:
:chart_with_upwards_trend:
:chart_with_downwards_trend:
:scroll:
:clipboard:
:calendar:
:date:
:card_index:
:file_folder:
:open_file_folder:
:scissors:
:pushpin:
:paperclip:
:black_nib:
:pencil2:
:straight_ruler:
:triangular_ruler:
:closed_book:
:green_book:
:blue_book:
:orange_book:
:notebook:
:notebook_with_decorative_cover:
:ledger:
:books:
:bookmark:
:name_badge:
:microscope:
:telescope:
:newspaper:
:football:
:basketball:
:soccer:
:baseball:
:tennis:
:8ball:
:rugby_football:
:bowling:
:golf:
:mountain_bicyclist:
:bicyclist:
:horse_racing:
:snowboarder:
:swimmer:
:surfer:
:ski:
:spades:
:hearts:
:clubs:
:diamonds:
:gem:
:ring:
:trophy:
:musical_score:
:musical_keyboard:
:violin:
:space_invader:
:video_game:
:black_joker:
:flower_playing_cards:
:game_die:
:dart:
:mahjong:
:clapper:
:memo:
:pencil:
:book:
:art:
:microphone:
:headphones:
:trumpet:
:saxophone:
:guitar:
:shoe:
:sandal:
:high_heel:
:lipstick:
:boot:
:shirt:
:tshirt:
:necktie:
:womans_clothes:
:dress:
:running_shirt_with_sash:
:jeans:
:kimono:
:bikini:
:ribbon:
:tophat:
:crown:
:womans_hat:
:mans_shoe:
:closed_umbrella:
:briefcase:
:handbag:
:pouch:
:purse:
:eyeglasses:
:fishing_pole_and_fish:
:coffee:
:tea:
:sake:
:baby_bottle:
:beer:
:beers:
:cocktail:
:tropical_drink:
:wine_glass:
:fork_and_knife:
:pizza:
:hamburger:
:fries:
:poultry_leg:
:meat_on_bone:
:spaghetti:
:curry:
:fried_shrimp:
:bento:
:sushi:
:fish_cake:
:rice_ball:
:rice_cracker:
:rice:
:ramen:
:stew:
:oden:
:dango:
:egg:
:bread:
:doughnut:
:custard:
:icecream:
:ice_cream:
:shaved_ice:
:birthday:
:cake:
:cookie:
:chocolate_bar:
:candy:
:lollipop:
:honey_pot:
:apple:
:green_apple:
:tangerine:
:lemon:
:cherries:
:grapes:
:watermelon:
:strawberry:
:peach:
:melon:
:banana:
:pear:
:pineapple:
:sweet_potato:
:eggplant:
:tomato:
:corn:
Places
md
:house:
:house_with_garden:
:school:
:office:
:post_office:
:hospital:
:bank:
:convenience_store:
:love_hotel:
:hotel:
:wedding:
:church:
:department_store:
:european_post_office:
:city_sunrise:
:city_sunset:
:japanese_castle:
:european_castle:
:tent:
:factory:
:tokyo_tower:
:japan:
:mount_fuji:
:sunrise_over_mountains:
:sunrise:
:stars:
:statue_of_liberty:
:bridge_at_night:
:carousel_horse:
:rainbow:
:ferris_wheel:
:fountain:
:roller_coaster:
:ship:
:speedboat:
:boat:
:sailboat:
:rowboat:
:anchor:
:rocket:
:airplane:
:helicopter:
:steam_locomotive:
:tram:
:mountain_railway:
:bike:
:aerial_tramway:
:suspension_railway:
:mountain_cableway:
:tractor:
:blue_car:
:oncoming_automobile:
:car:
:red_car:
:taxi:
:oncoming_taxi:
:articulated_lorry:
:bus:
:oncoming_bus:
:rotating_light:
:police_car:
:oncoming_police_car:
:fire_engine:
:ambulance:
:minibus:
:truck:
:train:
:station:
:train2:
:bullettrain_front:
:bullettrain_side:
:light_rail:
:monorail:
:railway_car:
:trolleybus:
:ticket:
:fuelpump:
:vertical_traffic_light:
:traffic_light:
:warning:
:construction:
:beginner:
:atm:
:slot_machine:
:busstop:
:barber:
:hotsprings:
:checkered_flag:
:crossed_flags:
:izakaya_lantern:
:moyai:
:circus_tent:
:performing_arts:
:round_pushpin:
:triangular_flag_on_post:
:jp:
:kr:
:cn:
:us:
:fr:
:es:
:it:
:ru:
:gb:
:uk:
:de:
Symbols
md
:one:
:two:
:three:
:four:
:five:
:six:
:seven:
:eight:
:nine:
:keycap_ten:
:1234:
:zero:
:hash:
:symbols:
:arrow_backward:
:arrow_down:
:arrow_forward:
:arrow_left:
:capital_abcd:
:abcd:
:abc:
:arrow_lower_left:
:arrow_lower_right:
:arrow_right:
:arrow_up:
:arrow_upper_left:
:arrow_upper_right:
:arrow_double_down:
:arrow_double_up:
:arrow_down_small:
:arrow_heading_down:
:arrow_heading_up:
:leftwards_arrow_with_hook:
:arrow_right_hook:
:left_right_arrow:
:arrow_up_down:
:arrow_up_small:
:arrows_clockwise:
:arrows_counterclockwise:
:rewind:
:fast_forward:
:information_source:
:ok:
:twisted_rightwards_arrows:
:repeat:
:repeat_one:
:new:
:top:
:up:
:cool:
:free:
:ng:
:cinema:
:koko:
:signal_strength:
:u6e80:
:sa:
:restroom:
:mens:
:womens:
:baby_symbol:
:no_smoking:
:parking:
:wheelchair:
:metro:
:baggage_claim:
:accept:
:wc:
:potable_water:
:put_litter_in_its_place:
:secret:
:congratulations:
:m:
:passport_control:
:left_luggage:
:customs:
:ideograph_advantage:
:cl:
:sos:
:id:
:no_entry_sign:
:underage:
:no_mobile_phones:
:do_not_litter:
:non-potable_water:
:no_bicycles:
:no_pedestrians:
:children_crossing:
:no_entry:
:eight_spoked_asterisk:
:sparkle:
:eight_pointed_black_star:
:heart_decoration:
:vs:
:vibration_mode:
:mobile_phone_off:
:chart:
:currency_exchange:
:aries:
:taurus:
:gemini:
:cancer:
:leo:
:virgo:
:libra:
:scorpius:
:sagittarius:
:capricorn:
:aquarius:
:pisces:
:ophiuchus:
:six_pointed_star:
:negative_squared_cross_mark:
:a:
:b:
:ab:
:o2:
:diamond_shape_with_a_dot_inside:
:recycle:
:end:
:back:
:on:
:soon:
:clock1:
:clock130:
:clock10:
:clock1030:
:clock11:
:clock1130:
:clock12:
:clock1230:
:clock2:
:clock230:
:clock3:
:clock330:
:clock4:
:clock430:
:clock5:
:clock530:
:clock6:
:clock630:
:clock7:
:clock730:
:clock8:
:clock830:
:clock9:
:clock930:
:heavy_dollar_sign:
:copyright:
:registered:
:tm:
:x:
:heavy_exclamation_mark:
:bangbang:
:interrobang:
:o:
:heavy_multiplication_x:
:heavy_plus_sign:
:heavy_minus_sign:
:heavy_division_sign:
:white_flower:
:100:
:heavy_check_mark:
:ballot_box_with_check:
:radio_button:
:link:
:curly_loop:
:wavy_dash:
:part_alternation_mark:
:trident:
:black_small_square:
:white_small_square:
:black_medium_small_square:
:white_medium_small_square:
:black_medium_square:
:white_medium_square:
:black_large_square:
:white_large_square:
:white_check_mark:
:black_square_button:
:white_square_button:
:black_circle:
:white_circle:
:red_circle:
:large_blue_circle:
:large_blue_diamond:
:large_orange_diamond:
:small_blue_diamond:
:small_orange_diamond:
:small_red_triangle:
:small_red_triangle_down:
テーマ
既存テーマ
用意されているテーマ(3種類)です。
md
Defaultテーマ
theme: default
Gaiaテーマ
theme: gaia
Uncoverテーマ
theme: uncover
テーマの具体的な記述を確認したい場合
テーマを指定する
テーマはスライド全体に適用され、スライドごとに指定することはできないので、marpの有効化と一緒に最初に設定すると良いです
md
---
marp: true
theme: uncover
---
カスタムテーマ
MarpはCSSでテーマを作ることができます
カスタムテーマ作成の準備
CSSファイルの作成
必要なら既存テーマをインポートします
/themes/mytheme.css
/* @theme mytheme */
@import "default";
MDファイルの作成
スライド側で、作成するテーマを指定します
myslide.md
---
marp: true
theme: mytheme
---
VS Codeにテーマを認識させる
VS Codeの settings.json にテーマの位置を追記します
- Code> Preferences> Settings
- settings.jsonを開く
- 検索窓にmarkdown.marp.themesと入力する
- 「項目の追加」ボタンを押し、テーマCSSファイルへのパスを入力「./themes/mytheme.css」
テーマのサンプル
themes/mytheme.css
/* @theme mytheme */
@import "gaia";
/* クラス名未指定全スライド共通設定 */
section {
/* フォント指定 */
font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN",
"Hiragino Sans", Meiryo, sans-serif;
/* スライドのサイズを指定 デフォルトでは16:9 */
width: 100%;
height: 100%;
}
/* topクラス*/
section.top {
background-color: yellowgreen;
display: flex;
align-items: center;
justify-content: center;
}
section.top h1 {
color: slategray;
font-size: 2rem;
}
section.top h2 {
color: white;
font-size: 2rem;
margin-top: 20px;
}
/* normalクラス*/
section.normal h1 {
color: #333;
font-size: 2rem;
margin-top: 20px;
border-bottom: 1px solid #333;
}
section.normal header {
text-align: right;
color: darkblue;
}
section.normal footer {
color: dimgray;
}
/* finishクラス */
section.finish {
background-color: black;
display: flex;
align-items: center;
justify-content: center;
}
section.finish h1 {
color: white;
font-size: 10rem;
}
myslide.md
---
marp: true
theme: mytheme
---
<!--
_class: top
-->
# スライドのタイトル
---
<!--
_class: normal
_header: "Qiita"
_footer: "スライド"
-->
# スライド 1
テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキステキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテストテキストテキストテキストテキストテキストテキストテキストテキスト
---
<!--
_class: normal
_header: "Qiita"
_footer: "スライド"
-->
# スライド 2
- リスト
- リスト
- リスト
- リスト
---
<!--
_class: finish
-->
# 完
出力
VS Codeで出力
1. Marpアイコン(2重三角)を押す
2. 「Export slide deck... 」を選択
3. ファイル形式を選択
- html
- PPTX
- png
- jpg
CLIで出力
marp-cliを使います。
marp-cli
npmを導入
terminal
npm init -y
marp-cli をインストール
terminal
npm install --save-dev @marp-team/marp-cli
PDF出力
terminal
npx marp --pdf --allow-local-files myslide.md
PPTX出力
terminal
npx marp --pptx --allow-local-files myslide.md
HTML出力
terminal
npx marp --html --allow-local-files myslide.md