SlideShare a Scribd company logo
1 of 15
Marp入門
2021/10/04 版
1
基本的な記法
# Heading tag
item1
item2
item3
Bold, 打消し, emoji
Blockquotes
など.Markdownの基本的な記法をサポート

詳しくは,Markdown記法 チートシートを参照
2
Code
Inline

puts 'Marp'
Code block
Python
import numpy as np

print('Hello Marp')

C++
void main(){

printf("Hello Marpn");

return 0;

}

3
数式
レンダラーは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
Marpの機能
5
Speaker notes
スライド内( --- --- 間)のコメント文 <!-- --> は全て発表ノートとして認識され,

pptx出力する際や,Marp CLIのプレゼンターモードの時に表示される.
pptx変換やプレゼンターモードはNotionの方で解説
6
Directives
Marpのスライドプロパティを設定する属性

Directiveを <!-- --> で囲むか,一番先頭の --- --- 間に書き込む事で設定可能

また,それぞれの属性の頭にアンダースコア _ を付けることで,指定したページ限定
で有効になる(このスライドのコードを参照)
paginate
theme
header
footer
size 

...etc
Doc:https://github.com/marp-team/marpit/blob/main/docs/directives.md
header
画像の挿入
![](画像のパス) で画像を挿入できる.[ ]内でサイズを変えたり,フィルタを掛けたり
できる( https://marpit.marp.app/image-syntax )

Marpの問題点として,画像の中央揃えが出来ないので,CSSで実装する必要がある
8
画像の挿入
style: |

img[alt~="center"] {

display: block;

margin: 0 auto;

}

[ ]内でcenterと指定することで,中央揃えになる

![center](<img_path>) 

9
Background
正直あまり使わない

![bg](画像のパス) で挿入

複数の画像を縦・横に並べることも可能
10
Background
左右分割も可能

Doc: https://marpit.marp.app/image-
syntax?id=slide-backgrounds
11
fontsizeとfontcolor
時としてフォントのサイズと色を変えたい場合があるが,Marpはネイティブで対応し
ていないので,HTMLのstyleで指定する必要がある.
HTMLタグを使用するための設定
VSCodeの「設定」から,「marp html」を検索し,「Marp: Enable HTML」に
12
fontsizeとfontcolor
HTMLのstyle要素を使用することで,フォントサイズや色を指定可能
<span style="font-size:フォントサイズ">文字</span>

<span style="color:色;">文字</span>

fontsize
small
big
28pt
fontcolor
red
blue
orange
13
以上がMarpの基本的な使い方です.

pptxの出力やMarp Cliの使用方法はNotionに書いてあります.

また,CSSを用いたカスタムテーマの作成方法は別途ナレッジを書く予定です.
14
参考になる記事とか
Marp
Marpit
Marp Cli
GitHub Repo
【VS Code + Marp】Markdownから爆速・自由自在なデザインで、プレゼンスラ
イドを作る
15

More Related Content

What's hot

型安全性入門
型安全性入門型安全性入門
型安全性入門Akinori Abe
 
グラフニューラルネットワーク入門
グラフニューラルネットワーク入門グラフニューラルネットワーク入門
グラフニューラルネットワーク入門ryosuke-kojima
 
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)Shota Imai
 
暗号技術の実装と数学
暗号技術の実装と数学暗号技術の実装と数学
暗号技術の実装と数学MITSUNARI Shigeo
 
DockerコンテナでGitを使う
DockerコンテナでGitを使うDockerコンテナでGitを使う
DockerコンテナでGitを使うKazuhiro Suga
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)mosa siru
 
ARM CPUにおけるSIMDを用いた高速計算入門
ARM CPUにおけるSIMDを用いた高速計算入門ARM CPUにおけるSIMDを用いた高速計算入門
ARM CPUにおけるSIMDを用いた高速計算入門Fixstars Corporation
 
例外設計における大罪
例外設計における大罪例外設計における大罪
例外設計における大罪Takuto Wada
 
Scapyで作る・解析するパケット
Scapyで作る・解析するパケットScapyで作る・解析するパケット
Scapyで作る・解析するパケットTakaaki Hoyo
 
画像認識モデルを作るための鉄板レシピ
画像認識モデルを作るための鉄板レシピ画像認識モデルを作るための鉄板レシピ
画像認識モデルを作るための鉄板レシピTakahiro Kubo
 
遺伝的アルゴリズム (Genetic Algorithm)を始めよう!
遺伝的アルゴリズム(Genetic Algorithm)を始めよう!遺伝的アルゴリズム(Genetic Algorithm)を始めよう!
遺伝的アルゴリズム (Genetic Algorithm)を始めよう!Kazuhide Okamura
 
こわくない Git
こわくない Gitこわくない Git
こわくない GitKota Saito
 
Surveyから始まる研究者への道 - Stand on the shoulders of giants -
Surveyから始まる研究者への道 - Stand on the shoulders of giants -Surveyから始まる研究者への道 - Stand on the shoulders of giants -
Surveyから始まる研究者への道 - Stand on the shoulders of giants -諒介 荒木
 
多様な強化学習の概念と課題認識
多様な強化学習の概念と課題認識多様な強化学習の概念と課題認識
多様な強化学習の概念と課題認識佑 甲野
 
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Kohei Tokunaga
 
Marp for VS Code で作る PowerPoint スライド
Marp for VS Code で作る PowerPoint スライドMarp for VS Code で作る PowerPoint スライド
Marp for VS Code で作る PowerPoint スライドIosif Takakura
 
RSA暗号運用でやってはいけない n のこと #ssmjp
RSA暗号運用でやってはいけない n のこと #ssmjpRSA暗号運用でやってはいけない n のこと #ssmjp
RSA暗号運用でやってはいけない n のこと #ssmjpsonickun
 
SAT/SMTソルバの仕組み
SAT/SMTソルバの仕組みSAT/SMTソルバの仕組み
SAT/SMTソルバの仕組みMasahiro Sakai
 
分散システムについて語らせてくれ
分散システムについて語らせてくれ分散システムについて語らせてくれ
分散システムについて語らせてくれKumazaki Hiroki
 

What's hot (20)

型安全性入門
型安全性入門型安全性入門
型安全性入門
 
研究効率化Tips Ver.2
研究効率化Tips Ver.2研究効率化Tips Ver.2
研究効率化Tips Ver.2
 
グラフニューラルネットワーク入門
グラフニューラルネットワーク入門グラフニューラルネットワーク入門
グラフニューラルネットワーク入門
 
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
強化学習の基礎と深層強化学習(東京大学 松尾研究室 深層強化学習サマースクール講義資料)
 
暗号技術の実装と数学
暗号技術の実装と数学暗号技術の実装と数学
暗号技術の実装と数学
 
DockerコンテナでGitを使う
DockerコンテナでGitを使うDockerコンテナでGitを使う
DockerコンテナでGitを使う
 
開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)開発速度が速い #とは(LayerX社内資料)
開発速度が速い #とは(LayerX社内資料)
 
ARM CPUにおけるSIMDを用いた高速計算入門
ARM CPUにおけるSIMDを用いた高速計算入門ARM CPUにおけるSIMDを用いた高速計算入門
ARM CPUにおけるSIMDを用いた高速計算入門
 
例外設計における大罪
例外設計における大罪例外設計における大罪
例外設計における大罪
 
Scapyで作る・解析するパケット
Scapyで作る・解析するパケットScapyで作る・解析するパケット
Scapyで作る・解析するパケット
 
画像認識モデルを作るための鉄板レシピ
画像認識モデルを作るための鉄板レシピ画像認識モデルを作るための鉄板レシピ
画像認識モデルを作るための鉄板レシピ
 
遺伝的アルゴリズム (Genetic Algorithm)を始めよう!
遺伝的アルゴリズム(Genetic Algorithm)を始めよう!遺伝的アルゴリズム(Genetic Algorithm)を始めよう!
遺伝的アルゴリズム (Genetic Algorithm)を始めよう!
 
こわくない Git
こわくない Gitこわくない Git
こわくない Git
 
Surveyから始まる研究者への道 - Stand on the shoulders of giants -
Surveyから始まる研究者への道 - Stand on the shoulders of giants -Surveyから始まる研究者への道 - Stand on the shoulders of giants -
Surveyから始まる研究者への道 - Stand on the shoulders of giants -
 
多様な強化学習の概念と課題認識
多様な強化学習の概念と課題認識多様な強化学習の概念と課題認識
多様な強化学習の概念と課題認識
 
Dockerからcontainerdへの移行
Dockerからcontainerdへの移行Dockerからcontainerdへの移行
Dockerからcontainerdへの移行
 
Marp for VS Code で作る PowerPoint スライド
Marp for VS Code で作る PowerPoint スライドMarp for VS Code で作る PowerPoint スライド
Marp for VS Code で作る PowerPoint スライド
 
RSA暗号運用でやってはいけない n のこと #ssmjp
RSA暗号運用でやってはいけない n のこと #ssmjpRSA暗号運用でやってはいけない n のこと #ssmjp
RSA暗号運用でやってはいけない n のこと #ssmjp
 
SAT/SMTソルバの仕組み
SAT/SMTソルバの仕組みSAT/SMTソルバの仕組み
SAT/SMTソルバの仕組み
 
分散システムについて語らせてくれ
分散システムについて語らせてくれ分散システムについて語らせてくれ
分散システムについて語らせてくれ
 

Recently uploaded

Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Danieldanielhu54
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxAtomu Hidaka
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directoryosamut
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールsugiuralab
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000Shota Ito
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価sugiuralab
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。iPride Co., Ltd.
 

Recently uploaded (8)

Postman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By DanielPostman LT Fukuoka_Quick Prototype_By Daniel
Postman LT Fukuoka_Quick Prototype_By Daniel
 
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptxIoT in the era of generative AI, Thanks IoT ALGYAN.pptx
IoT in the era of generative AI, Thanks IoT ALGYAN.pptx
 
20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory20240412_HCCJP での Windows Server 2025 Active Directory
20240412_HCCJP での Windows Server 2025 Active Directory
 
プレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツールプレイマットのパターン生成支援ツール
プレイマットのパターン生成支援ツール
 
PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000PHP-Conference-Odawara-2024-04-000000000
PHP-Conference-Odawara-2024-04-000000000
 
プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価プレイマットのパターン生成支援ツールの評価
プレイマットのパターン生成支援ツールの評価
 
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
新人研修のまとめ       2024/04/12の勉強会で発表されたものです。新人研修のまとめ       2024/04/12の勉強会で発表されたものです。
新人研修のまとめ 2024/04/12の勉強会で発表されたものです。
 
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
Amazon SES を勉強してみる その12024/04/12の勉強会で発表されたものです。
 

Marp Tutorial