Qiita用

1. Marp入門
2021/10/04
Watanabe Rui

2. 基本的な記法
# Heading tag
item1
item2
item3
Bold, 打消し, emoji
Blockquotes
など．Markdownの基本的な記法をサポート
詳しくは，Markdown記法 チートシートを参照
2

3. Code
Inline
puts 'Marp'
Code block
Python
import numpy as np
print('Hello Marp')
C++
void main(){
printf("Hello Marpn");
return 0;
}
3

4. 数式
レンダラーはKaTeXだが，いつものLaTeX形式で書ける
​
D(X∥FQ) s.t. f ​
, q ​ ≥ 0 ∀i, j, k
F ,Q
min ik kj
​ ​ ​ ​ ​ ​
⎝
⎛a ​
11
⋮
a ​
i1
⋮
a ​
n1
⋯
⋱
⋯
a ​
1i
a ​
ii
a ​
ni
⋯
⋱
⋯
a ​
1n
⋮
a ​
in
⋮
a ​
nn
⎠
⎞
4

5. Marpの機能
5

6. Speaker notes
スライド内（ --- --- 間）のコメント文 <!-- --> は全て発表ノートとして認識され，
pptx出力する際や，Marp CLIのプレゼンターモードの時に表示される．
pptx変換やプレゼンターモードはNotionの方で解説
6

7. Directives
Marpのスライドプロパティを設定する属性
Directiveを <!-- --> で囲むか，一番先頭の --- --- 間に書き込む事で設定可能
また，それぞれの属性の頭にアンダースコア _ を付けることで，指定したページ限定
で有効になる（このスライドのコードを参照）
paginate
theme
header
footer
size
...etc
Doc：https://github.com/marp-team/marpit/blob/main/docs/directives.md
header

8. 画像の挿入
 で画像を挿入できる．[ ]内でサイズを変えたり，フィルタを掛けたり
できる（ https://marpit.marp.app/image-syntax ）
Marpの問題点として，画像の中央揃えが出来ないので，CSSで実装する必要がある
8

9. 画像の挿入
style: |
img[alt~="center"] {
display: block;
margin: 0 auto;
}
[ ]内でcenterと指定することで，中央揃えになる
9

10. Background
正直あまり使わない
 で挿入
複数の画像を縦・横に並べることも可能
10

11. Background
左右分割も可能
Doc: https://marpit.marp.app/image-
syntax?id=slide-backgrounds
11

12. fontsizeとfontcolor
時としてフォントのサイズと色を変えたい場合があるが，Marpはネイティブで対応し
ていないので，HTMLのstyleで指定する必要がある．
HTMLタグを使用するための設定
VSCodeの「設定」から，「marp html」を検索し，「Marp: Enable HTML」に
12

13. fontsizeとfontcolor
HTMLのstyle要素を使用することで，フォントサイズや色を指定可能
<span style="font-size:フォントサイズ">文字</span>
<span style="color:色;">文字</span>
fontsize
small
big
28pt
fontcolor
red
blue
orange
13

14. 以上がMarpの基本的な使い方です．
また，CSSを用いたカスタムテーマの作成方法は別途記事を各予定です．
14

15. 参考になる記事とか
Marp
Marpit
Marp Cli
GitHub Repo
【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスラ
イドを作る
15