78
Help us understand the problem. What are the problem?

posted at

updated at

Marp(Marpit)

Marp(Marpit)

Marp(Marpit)を使って、Markdownからスライドを作成します。

Marpit

準備

VS Codeと拡張機能を使用します。
Marp for VS Code

marp_icons.png
.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
画像を挿入
![](img/pic1.png)

幅200pxで表示
![width:200px](img/pic1.png)

高さ300pxで表示
![height:30cm](img/pic1.png)

幅200px、高さ30cmで表示
![width:200px height:30cm](img/pic1.png)

短縮記法
![w:32 h:32](img/pic1.png) 

背景画像

背景画像の挿入
md
背景画像を挿入
![bg](img/pic1.png)

背景画像の大きさをスライドサイズの比率で指定する
![bg X%](img/pic1.png)
背景サイズ
md
![bg contain](img/pic1.png)
キーワード 内容 指定方法
cover スライド全体に画像を拡大縮小(デフォルト) ![bg cover](image.jpg)
contain スライドに合わせて画像を拡大縮小 ![bg contain](image.jpg)
fit containの別名(decksetとの互換) ![bg fit](image.jpg)
auto 画像を拡大縮小しない ![bg auto](image.jpg)
x% 倍率をパーセンテージ値で指定 ![bg 150%](image.jpg)

width(w)、height(h)でもサイズを指定可能です

複数の背景
横並び

デフォルトで横に並びます。

md
![bg](img/pic1.png)
![bg](img/pic2.png)
![bg](img/pic3.png)
縦並び

vertical方向キーワードを使用すると、配置方向を縦に変更できます

md
![bg vertical](img/pic1.png)
![bg](img/pic2.png)
![bg](img/pic3.png)
背景の分割

割合を指定しないと、スライドサイズの半分で分割します
スライドコンテンツのスペースも縮小されます

md
右(割合未指定なので50%)
![bg right](img/pic1.png)

左(割合未指定なので50%)
![bg left](img/pic1.png)

左33% 
![bg left:33%](img/pic2.png)
背景色
md

色名指定
![bg](red)

背景画像+背景色
![bg opacity:0.5](img/pic2.png)
![bg](#CD853F)

画像フィルター

インライン画像、背景画像両方に適用可能

md
インライン画像の明るさを8割に落とし、セピア50%にする
![brightness:.8 sepia:50%](img/pic1.png)

背景画像の明るさを6割に落とす
![bg brightness:.6](img/pic1.png)
フィルター名 指定方法
ぼかし ![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

テーマの具体的な記述を確認したい場合

テーマ scssファイル
default https://github.com/marp-team/marp-core/blob/26f2402d443d26af387adb0ee86cafa1149beb34/themes/default.scss
gaia https://github.com/marp-team/marp-core/blob/26f2402d443d26af387adb0ee86cafa1149beb34/themes/gaia.scss
uncover https://github.com/marp-team/marp-core/blob/26f2402d443d26af387adb0ee86cafa1149beb34/themes/uncover.scss

テーマを指定する

テーマはスライド全体に適用され、スライドごとに指定することはできないので、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 にテーマの位置を追記します

  1. Code> Preferences> Settings
  2. settings.jsonを開く
  3. 検索窓にmarkdown.marp.themesと入力する
  4. 「項目の追加」ボタンを押し、テーマ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で出力

marp_icons.png
1. Marpアイコン(2重三角)を押す
2. 「Export slide deck... 」を選択
3. ファイル形式を選択

  • PDF
  • 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
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
78
Help us understand the problem. What are the problem?