typememo.jp

パワポ使って消耗してませんか? Marp for VSCode を使いこなして楽をする方法教えます

2020.10.16

#tech#marp#vscode

Contents


はじめに

marp for vscode の使い方についてのざっくりとした説明です.

今の内に vscode にインストールしておいてください.

“発表用のスライド作らないといけないけど,パワポ使ってスライド作るの面倒くさいな.” と思っている人向けの記事です.

マークダウンで手軽にスライドを作ることができるので marp for vscode はおすすめです.

元はマークダウンファイルでプレインテキストなので Git でのバージョン管理も楽チンです.

それでは参りましょう!

参考:

基本ルール

基本ルールはとてもシンプルで --- で区切られた内容が一つのスライドになることだけです.

その他の細かい marp 独特の文法は以下で説明します.

具体例

具体例を見ながらの方がよく理解できると思いますのでリンクを記載しておきます.

marp の有効化

マークダウンファイルのフロントマターに marp: true と書くだけで marp for vscode が有効になります.

適当にスライドの中身を書いて >Open preview to the side をクリックしてプレビューを表示するとこんな感じのスライドができます.

marp-example-1

テーマ設定

テーマ設定はフロントマターに theme: gaiatheme: uncover のように書けば OK です.

個人的に左上から始まるスライドが好きなので gaia というテーマを使っています.

uncover などの中央寄せのモダンなテーマも用意されているようです.

スライド番号

スライド番号を降りたい場合はフロントマターに paginate: true と書けば OK です.

ヘッダーとフッター

ヘッダーとフッターはそれぞれフロントマターに header: This is headerfooter: This is footer のように書けば OK です.

その他のディレクティブ

そのほかのディレクティブについては Local directives を参照してください.

画像

画像を挿入するには ![]() の記法を使えば良いのですが少し独特の書き方をします.

![bg right](./path/to/img) でスライド右半分に画像が挿入されます.

![bg left](./path/to/img) でスライド左半分に画像が挿入されます.

![bg right contain](./path/to/img) でスライド右側に画像が挿入されます. ![bg left contain](./path/to/img) でスライド左側に画像が挿入されます. しかし,スライド左側に画像が挿入されるとスライド見出しが右側に移動するので少し違和感が生じます.

スライド出力

スライドを PDF 形式などで出力する時は >Marp: Export slide deck... を実行してください.

おわりに

marp for vscode を使って楽をするための marp for vscode 使い方についての紹介でした.

画像とかコードブロックとかが挿入できれば基本的なスライドは作れると思います.

プレインテキストなのでついついたくさん書いてしまいそうになるので気をつけてください.

最後までお読みいただきありがとうございました.

お手紙 お待ちしております!


山田 武尊 / 立教大学(理学) / ACCESS CO LTD